vue 中面包屑带跳转的做法

最新推荐文章于 2024-01-15 14:54:53 发布

会飞得猪

最新推荐文章于 2024-01-15 14:54:53 发布

阅读量1.8k

点赞数 2

分类专栏： vue+element做后台文章标签： vue

本文链接：https://blog.csdn.net/wuwenjie_1997/article/details/106781032

版权

vue+element做后台专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先要在子页面的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>