Vue の第 3 階層ルートの内容が第 2 階層ルート（階層表示）に表示され、選択状態が保存されます。(ルートをネストしているときに、Vue-router はマルチレベルのメニューをどのように実行しますか。)

1. ジャンプタグ <router-link></router-link> を使用します。ジャンプを実現するために this.$router() を使用しないでください (主に私のやり方がうまくできなかったためです、ふふ)

コードは以下のように表示されます。

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

2. 第 3 レベルの配線出口は、表示したい領域の最外層に配置されます (つまり、第 2 レベルの配線表示領域と兄弟関係になります)。コンテンツの幅と高さの設定は同じです。クリックしてジャンプすると自動的に上書きされます。

コードは以下のように表示されます。

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

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

役に立ちましたら、いいね、フォロー、お気に入り登録をお願いします(｡･ω･｡)ﾉ♡