解決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頁面

在milestone頁面監聽beforeRouteEnter事件

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();
    },
複製代碼

在beforeRouteEnter事件中修改meta信息，從而更新麪包屑的導航路由。

主要的實現思路就是在目標頁面添加beforeRouteEnter事件，而後更改其meta配置信息，從而達到更改麪包屑導航路徑。

若是你還有更好的解決辦法，歡迎留言。