// 安装
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>
路由懒加载
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)
