5.拆分配置路由

一.配置路由

1、安装依赖

yarn add vue-router

2、在App.vue

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

3、在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')
        }
    ]
  })

4、在main.js下

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

5、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>

二.拆分路由

1.src/utils/config.js

import Vue from 'vue'
import 'lib-flexible/flexible.js'
import '@/assets/css/reset.css'
import BsBtn from '@/components/BsBtn.vue';
Vue.filter("format",function(val){
    if(val.length>6){
      val=val.slice(0,6)+"..."
    }
    return val
  })
  Vue.component('BsBtn',BsBtn)
  export default Vue;

2.src/main.js

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

3.main.js中引入config.js

import './utils/config.js'