1.路由配置

一、安装依赖

yarn add vue-router

二、在App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

三、在routers文件夹下

//index.js
import Vue from 'vue';
import Router from 'vue-router'
import Music from '@/pages/Music.vue'
import Mv from '@/pages/Mv.vue'
Vue.use(Router);
export default new Router({
    mode:"hash",        //history
    routes:[
        {
            path:'/music',
            name:"music",
            component:Music
        },
        {
            path:'/mv',
            name:"mv",
            component:Mv
        }
    ]
})

3.1 异步路由

• 进入页面时才会触发路由

  export default new Router({
    mode:"hash",
    routes:[
        ...
        {
            path:"/detail",
            name:"detail",
            /* 异步路由 */
            component:()=>import('@/pages/Detail')
        }
    ]
  })

四、在main.js下

import router from './routers'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

五、router-link 切换

//App.vue下
<template>
  <div id="app">
    <div id="nav"> 
      <router-link to="/music">音乐</router-link>
      <router-link to="/mv">MV</router-link>
    </div>
     <router-view></router-view>
  </div>
</template>