vue路由基础 （个人）

首先要有一个路由的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，可以传参query:{}