Fixed routing of breadcrumb navigation

When configuring the router, we can configure the breadcrumb data in the meta, such as route configuration:

{
    path: '/project/process/:id',
    name: 'process',
    component: () => import('@/views/project/process/main.vue'),
    meta: [
        { name: 'Project Management List' },
        { name: 'Item List', url: '/project/list' },
        { name: 'milestone'},],},Copy the code

Code:

<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>
Copy the code

If it’s purely for presentation, you don’t have to write a URL link, you configure the route like this

{
    path: '/project/process/:id',
    name: 'process',
    component: () => import('@/views/project/process/main.vue'), meta: [' Project Management ','Project Schedule'.'milestone'],},Copy the code

Then the code:

<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>
Copy the code

Solve Vue multi-level dynamic breadcrumb navigation

This is fine for some of the more fixed breadcrumbs, but we often encounter dynamic routing in projects, such as: The route from page A is /list to page B is /list/:id. There is A word page under page B, /list/detail. What should be done about this dynamic nested multi-level routing?

Configure the routing

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

The only thing worth noting is that the details page is a dynamic route. To jump from the details page to the item list, we need the corresponding ID information, but at this time, id can not be fixed, but a dynamic value.

Modifying the detail page

Listen for the beforeRouteEnter event on the Milestone page

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

Modify the meta information in the beforeRouteEnter event to update the breadcrumb navigation route.

The main idea is to add the beforeRouteEnter event to the target page and then change its meta configuration information to change the breadcrumb navigation path.

If you have a better solution, please leave a comment.