vue-router

// 安装
npm install vue-router --save

现在目录新建一个router文件夹，里面新建一个index.js
内容写

import Vue from 'vue'
import Router from 'vue-router'
//导入组件
import Recommend from 'components/recommend/recommend'

Vue.use(Router)

export default new Router({
  routes:[
    {
      path:'/',
      redirect:'/recommend'// 默认初始页面，例如 推荐页面
    }，
    {
      path:'/recommend',
      component:Recommend,// 在上面导入组件
      children:[//二级路由，在最后说怎么使用
        {
           path:':id',
            component:Disc
        }
      ]
    }，
    .......
  ]
})

// 在 main.js导入
...
import router form './router' // 导入上面的文件
... 
new Vue({
  el:'#app',
  router,// 这样导入即可
  ...
})

// 例如本项目中 点击一个 推荐歌单 可以 跳到组件Disc
this.$router.push({
        path: `/recommend/${item.dissid}`
})

router-link

<router-link tag="div" class="mine" to="/user">
      <i class="icon-mine"></i>
</router-link>

路由懒加载

vue中的懒加载和按需加载

const Component = (resolve)=>{
  import('/srv/components/xxx/xxx').then((module)=>{
    resoleve(module)
  })
}

开发中的问题

嵌套路由，路由路径重叠
默认下是

当点击‘选项1-2’时

//router的index.js
routes: [
    {
      path: '',
      name: 'layout',
      redirect: 'menu-1',
      component: Layout,
      children: [{
        path: 'menu-1-1',
        component: (resolve) => { require(['@/views/menu-1/menu-1-1.vue'], resolve) }
      }]
    },
    {
      path: '/menu-1',
      name: 'menu-1',
      redirect: '/menu-1/menu-1-1',
      component: Layout,
      children: [
        {
          path: 'menu-1-1',
          component: (resolve) => {
            require(['@/views/menu-1/menu-1-1.vue'], resolve)
          },
          name: 'menu-1-1'
        },
        {
          path: 'menu-1-2',
          component: (resolve) => {
            require(['@/views/menu-1/menu-1-2.vue'], resolve)
          },
          name: 'menu-1-2'
        }
      ]
    }
  ]

//组建中的router-link
<router-link to="menu-1/menu-1-1" >
   <el-menu-item :index="menu-1/menu-1-1">选项一</el-menu-item>
</router-link>
<router-link to="menu-1/menu-1-2" >
   <el-menu-item :index="menu-1/menu-1-2">选项一</el-menu-item>
</router-link>

问题讨论
解决办法
①：this.$router.push('menu-1/menu-1-2)