vue 中面包屑带跳转的做法

首先要在子页面的meta中定义

{
   path: '/staffsManagement',
     component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/systemSetting/staffsManagement/index.vue'),
     meta: [{ name: '员工管理' }],
 },
 {
     path: '/staffsManagement/addedstaff',
     component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/systemSetting/staffsManagement/addedstaff.vue'),
     meta: [{ name: '员工管理' ,url:'/staffsManagement'},//子页面的meta中要携带父页面的名称以及路径
         {name:'新建员工'}
     ],
 },

下来 设置面包屑

<el-breadcrumb separator="/" style="margin:20px">
    <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item,index) in this.$route.meta" :key="index" :to="item.url">
        <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
        <a v-else>
            {{item.name}}
        </a>
    </el-breadcrumb-item>
</el-breadcrumb>