The content of the Vue third-level route is displayed in the second-level route (level display), and the selected state is saved. (How does Vue-router do multi-level menus while nesting routes.)

1. Use the jump tag <router-link></router-link>, do not use this.$router() to realize the jump (mainly because I didn’t do it well, hehe)

code show as below:

<router-link to="/home/thescheduleof/flow">跳转</router-link>

2. The third-level routing exit is placed on the outermost layer of the area you want to display (that is, it is a brother relationship with the second-level routing display area). The content width and height settings are the same, and it will be automatically overwritten when you click to jump.

code show as below:

<template>
  <div class="theScheduleOf">
    //三级路由出口
    <keep-alive>
          <router-view></router-view>
    </keep-alive>
   //二级路由展示内容
    <div class="theScheduleOf_content_box">
    </div>
</template>

3. Three-level routing configuration

code show as below:

{
    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')
          },
        ]
       }
    ]
}

If it is useful, please like it, follow it and add to favorites (｡･ω･｡)ﾉ♡