vue-router 中 meta 一般用在什麼地方？多級動態麪包屑導航怎麼配置？

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: '詳情' },
    ],
},
...

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配置信息，從而達到更改麪包屑導航路徑。

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