vue-router 嵌套路由,二级子路由
项目中如果都是一级路由,路由管理会有些乱。嵌套路由是路由中包含路由的意思,组件中可以有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套,在vue组件中使用<router-view>就可以了。
1.嵌套路由的使用场景
当项目中有选项卡时,切换选项卡按钮,页面中间部分的内容会变,但是选项卡按钮不会变;页面中间部分内容的变化就可以通过二级子路由实现,中间部分显示的内容就是二级子路由的内容
2.举个例子
在组件中:
<router-view> 是用来渲染通过路由映射过来的组件,当路径更改时,<router-view> 中的内容也会发生更改
<template>
<div class="me">
<div class="me-header">个人中心</div>
<h3>二级路由,嵌套路由</h3>
<div class="tab">
<router-link to="/me/a">
<div class="children">我是a组件</div>
</router-link>
<router-link to="/me/b">
<div class="children">我是b组件</div>
</router-link>
<router-link to="/me/c">
<div class="children">我是c组件</div>
</router-link>
</div>
<router-view/>
</div>
</template>
在router的index中子路由配置:
{
path: '/me',
name: 'me',
component: ()=> import('@/views/me.vue'),
children: [
{
path: 'a',
component: () => import('@/components/me/a.vue'),
},
{
path: 'b',
component: () => import('@/components/me/b.vue'),
},
{
path: 'c',
component: () => import('@/components/me/c.vue'),
},
]
}
点击“我是a组件”按钮路由就渲染me下的a组件内容,点击“我是b组件”按钮路由就渲染me下的b组件内容,点击“我是c组件”按钮路由就渲染me下的c组件内容
效果如下:
点击我是a组件
点击我是b组件
点击我是c组件