嵌套路由实现左边选择右边刷新:
左边菜单栏使用:router-link 标签,右边使用 router-view 嵌套,实现路由;
router-link 传参方式:
其中name 需要和 router.js 中路由对应,传入不同的 type 以区分不同的tab页面;
实现步骤:
1.app 的主路由中 这个步骤一成不变;
2.在想要实现同页面的嵌套路由的page中;再一次定义一个 router-view 标签,如下:
①:需要跳转的 router-link :
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link :to="{name: 'firstPage', params:{type:'1'}}">选项一
</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link :to="{name: 'firstPage', params:{type:'2'}}">选项二
</router-link>
</el-menu-item>
</el-menu-item-group>
复制代码
②:嵌套的 router-view:
<el-main>
<router-view></router-view>
</el-main>
复制代码
③:router.js 中的配置:
routes: [
{
path: '/',
name: 'mainPage',
component: MainPage
},
{
path: '/page',
name: 'mainPage',
component: MainPage,
children: [
{
path: '/page/:type',
name: 'firstPage',
component: FirstPage
}
]
}
]
复制代码
其中需要一个根路由,再在根路由的路径下写子路由路径!注意 path 下面的路径配置;其中,type 的值使我们在 router-link 中传递过来的;在子组件的 firstPage 中我们可以使用 watch 来监听url 上面的 params 变化;具体如下:
④:在 firstPage 中的 watch 函数监听 route 变化
watch: {
'$route' (to, form) {
if (this.$route.params.type === '1') {
this.Msg = '这是第一页'
} else if (this.$route.params.type === '2') {
this.Msg = '开心,这是第二页'
}
}
}
复制代码
在这个地方执行该页面相应的操作即可;
注意事项:
1.keep-alive 标签的用法:
<keep-alive>
<router-view></router-view>
</keep-alive>
复制代码
配合 router-view 缓存整个路由页面
2.路由中可以使用 children 当作路由的嵌套;
{
path: '/app',
name:'app',
redirect:'/app/main',
component: resolve => import('./app'),
children:[
{
path: '/app/main',
name:'main',
component: resolve => import('./view/mainPage'),
}
]
}
复制代码
3.路由中component中 resolve 的用法:
onent: resolve => import('./view/mainPage')
复制代码
实现路由的懒加载;