Vueは多段動的なパン粉ナビゲーションの問題を解決します。

ルートを固定するパンくずナビゲーション
私たちはrouterを配置する時、パン屑データをmetaに配置することができます。
例えば
ルートの設定:

{
  path: '/project/process/:id',
  name: 'process',
  component: () => import('@/views/project/process/main.vue'),
  meta: [
    { name: '      ' },
    { name: '    ', url: '/project/list' },
    { name: '   ' },
  ],
},

コード:

<el-breadcrumb separator-class="el-icon-arrow-right">
 <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
    <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
    <a v-else>
      {{item.name}}
    </a>
  </el-breadcrumb-item>
</el-breadcrumb>

単なる展示なら、urlリンクを書かなくてもいいです。ルートはこのように構成されています。

{
  path: '/project/process/:id',
  name: 'process',
  component: () => import('@/views/project/process/main.vue'),
  meta: [‘    ', '    ', '   '],
},

そしてコード:

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{path: '/home'}">  </el-breadcrumb-item>
  <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
  {{item}}
  </el-breadcrumb-item>
</el-breadcrumb>

Vue多段動的なパン粉ナビゲーションを解決します。
いくつかの比較的に固定的なパン粉に対してはよく実現されますが、プロジェクトではよく動的なルートがあります。
例えば、Aページを／listとルーティングする。
AページからBページにジャンプすると/list/:idです。
Bページの下にもう一つのワードページがあります。/list/detail
私たちはCページでパン粉ナビゲーションでBページに入りたいですが、どうすればいいですか？
このような動的ネスト多レベルルートに対してはどう処理すればいいですか？
ルートの設定

...
{
  path: '/type',
  name: 'type',
  component: () => import('@/views/type/main.vue'),
  meta: [
    { name: '    ' },
  ],
},
{
  path: '/type/list/:id',
  name: 'list',
  component: () => import('@/views/list/type/main.vue'),
  meta: [
    { name: '    ', url: '/list' },
    { name: '    ' },
  ],
},
{
  path: '/list/detail',
  name: 'detail',
  component: () => import('@/views/type/list/detail/index.vue'),
  meta: [
    { name: '    ', url: '/list' },
    { name: '    ', url: '/type/list' },
    { name: '  ' },
  ],
},
...

このルートには違いがないと見られますが、唯一の注意すべき点は詳細ページであり、ダイナミックなルートです。詳細ページからプロジェクトリストにジャンプするには、該当するID情報が必要です。しかし、この時点でidは固定的に記入できず、ダイナミックな値です。
detailページを変更
mileestoneページでbefore Route Enterイベントを傍受します。

beforeRouteEnter(to, from, next) {
  const meta = to.meta;
  for (let i = 0; i < meta.length; i++) {
    if (meta[i].name === '    ') {
      meta[i].url = `/type/list/${from.params.id}`;
    }
  }
  next();
  },

before Route Enterイベントでmeta情報を修正し、パン粉のナビゲーションルートを更新します。
目標ページにbefore Route Enterイベントを追加し、そのmetaの設定情報を変更して、パン粉ナビゲーションのルートを変更するという考えです。
もっといい解決策があれば、メッセージを歓迎します。
以上のこのVueは多級の動的パン粉ナビゲーションの問題を解決しました。つまり、小編集は皆さんに全部の内容を共有しました。参考にしてもらいたいです。どうぞよろしくお願いします。