首页 > 其他分享 >vue路由基础 (个人)

vue路由基础 (个人)

时间:2022-12-08 10:03:09浏览次数:37  
标签:vue 个人 app js import router 路由

首先要有一个路由的js文件

import {    createRouter,    createWebHashHistory} from "vue-router";
import appHome from '../views/Home.vue'
import itemMusic from '../views/ItemMusic.vue'

将要路由的组件引入进来

const routes = [{
        path: '/',
        name: 'appHome',
        component: appHome
    },
    {
        path: '/itemMusic',
        name: 'itemMusic',
        component: itemMusic

    }
]

写路由配置一般主页面路径就是'/'

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})

创建一个路由器把路由写进去(其实和真路由器有点像,先买个路由器在自己写路由)

然后不要忘了暴露

在main.js里面使用路由

import router from './router/index.js'

const app = createApp(App)

app.use(router)

app.mount('#app')

好像得把原来的app写法改一下(js还是不够扎实。。)

然后去app里面把  <RouterView></RouterView>写进去,当然些别的地方也行。

(因为有'/'的存在所以我觉得  <RouterView></RouterView>只能写一个吧,)

<RouterLink :to="{name:'itemMusic',query:{id:music.id}}">你想包的东西</RouterLink>

最后在link里边配置to,这里因为实在v-for里写的所以有个:。写上name或者path,可以传参

 

标签:vue,个人,app,js,import,router,路由
From: https://www.cnblogs.com/ZZDDElla/p/16965264.html

相关文章