1.使用跳转标签<router-link></router-link>,不要使用this.$router()实现跳转(主要是我没搞好,嘿嘿)
代码如下:
<router-link to="/home/thescheduleof/flow">跳转</router-link>
2.三级路由出口放在你想要展示区域的最外层(也就是和二级路由展示区域是兄弟关系),内容宽高设置一样,点击跳转时会自动覆盖。
代码如下:
<template>
<div class="theScheduleOf">
//三级路由出口
<keep-alive>
<router-view></router-view>
</keep-alive>
//二级路由展示内容
<div class="theScheduleOf_content_box">
</div>
</template>
3.三级路由配置
代码如下:
{
path: '/home',
// name: 'Home',
component: () => import('../views/Home.vue'),
children: [
{ path: '/', redirect: '/Schedule' },
{
path: '/Schedule',
name: 'Schedule',
component: () => import('../views/MySchedule.vue')
},
{
path: 'thescheduleof',
// name: 'TheScheduleOf',
component: () => import('../views/TheScheduleOf.vue'),
children: [
{
path: '/home/thescheduleof/flow',
name: 'Flow',
component: () => import('../views/Flow.vue')
},
]
}
]
}
有用的话请点赞,关注加收藏哦(。・ω・。)ノ♡