一、安装

vue-router@3，@4分别对应vue2，3.。我现在用的是vue2，

npm install vue-router@3

二、使用

①首先在component路径下提前写好需要渲染的组件。

②在App.vue中使用router声明路由。其中router-link的to指明渲染哪一个组件。router-view是一个占位符，每次需要渲染的组件就放在这个占位符这。

<div id="app">
    <h1>APP组件</h1>
    <router-link to="/discover">发现音乐</router-link><br>
    <router-link to="/my">我的音乐</router-link><br>
    <router-link to="/friends">关注</router-link><br>
    <router-link to="/barry">Barry</router-link>
    <!-- 声明路由占位标签 -->
    <!-- 每次点击组件时会渲染到router-view占位符 -->
    <router-view></router-view>
  </div>

③现在只是指明了要渲染哪个组件，但是这些名字和具体的component还没有对应上，需要有专门的js写映射。

index.js

//在js里面定义对应关系
import VueRouter from "vue-router"
import Vue from "vue"
import Discover from "@/components/Discover.vue"
import Friends from "@/components/Friends.vue"
import My from "@/components/My.vue"
import Barry from "@/components/Barry.vue"


//将VueRouter设置为Vue插件
Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {path:"/",redirect:"/discover"},
        {path:"/discover",component:Discover},
        {path:"/friends",component:Friends},
        {path:"/my",component:My},
        {path:"/barry",component:Barry}
    ]
})

//把router导出，在main.js中使用
export default router

④在main.js中配置一下。

import Vue from 'vue'
import App from './App.vue'

//导入router
import router from "./router/index"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

三、路由嵌套

在Discover.vue中加两个孩子路由

<div>
        <h1>发现音乐</h1>
        <!-- 子路由 -->
        <router-link to="/discover/toplist">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>

和之前的操作一样，要在component下写好对应的组件文件，唯一有区别的就是在index.js的Discover下写好孩子路由。

四、动态路由

就是说有一个组件会被使用多次，例如音乐推荐里面用的组件都是同一个，只是值不一样，这个时候不能手动的一个个去写路径。直接使用动态路由即可。

例如我需要展示的是三个卡片，按理说我的index.js也要写多个路径。（其实感觉能用for循环）

<div>
        <h1>我的音乐</h1>
        <router-link to="/my/1">收藏1</router-link>
        <router-link to="/my/2">收藏2</router-link>
        <router-link to="/my/3">收藏3</router-link>
        <router-view></router-view>
    </div>

实际上使用":id"即可

{path:"/my",
        component:My,
        children:[
            {path:":id",component:MusicCard,props: true}
        ]
        
    },

除此之外呢，注意到上面的代码中有个props:true的参数，这里是为了让MusicCard组件接收到id参数，因为我们在具体的使用中网络请求肯定会请求一系列的数据都要基于id。在MusciCard组件中声明id就能直接使用了。

<template>
    <div>
        <h3>收藏音乐{{ id }}</h3>
    </div>
</template>


<script>
    export default{
        props:["id"]
    }
</script>

五、路由守卫