配置路由

2-1 配置路由

//routers/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Music from '@/views/Music.vue'
import Mv from '@/views/Mv.vue'
Vue.use(Router);
export default new Router({
    mode:"hash",
    routes:[                          
        {
            path:'/music',
            name:"music",
            component:Music
        },
      // 此模块为创建页面，与小程序中tabal类似
        {
            path:'/mv',
            name:"mv",
            component:Mv
        }
    ]
})

2-2 App.vue

<template>
  <div id="app">
     <router-view></router-view> //不知道为什么要加，但是要加
  </div>
</template>

2-3 main.js

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

2-4 router-link

<template>
  <div id="app">
    <div id="nav"> 
      <router-link to="/music">音乐</router-link>  /*vue中的页面跳转*/
      <router-link to="/mv">MV</router-link>
    </div>
     <router-view></router-view>
  </div>
</template>