解决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配置信息，从而达到更改面包屑导航路径。

若是你还有更好的解决办法，欢迎留言。