【Vue2+Element ui通用后台】面包屑和tag功能

文章介绍了如何在Vue项目中使用ElementUI的面包屑组件显示当前页面路径，并通过Vuex管理状态，动态更新面包屑内容。同时，将标签功能封装成组件，利用Vuex获取面包屑数据，展示可关闭的Tag，并根据路由切换改变主题。文章还提到了在router/index.js中为路由添加name属性的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

面包屑
tag

面包屑

Element ui 面包屑：显示当前页面的路径，快速返回之前的任意页面，完成效果如下：
在这里插入图片描述

我们之前把头部的代码封装到了 CommonHeader.vue 中，面包屑部分直接写死了一个首页，我们可以把官网的面包屑代码先直接复制过来：

<el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

之前我们在 store/tab.js 中我们写了头部的是否开关，这里我们增加面包屑的数据。我们点击左侧菜单，面包屑会依次展示菜单内容，所以数据结构和菜单差不多，我们直接复制菜单的数据

export default {
    state:{
        isCollapse:false,//控制菜单展开/收起
        tabList:[
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/home'
            },
        ]//面包屑数据
    },
    mutations:{
        ......
    }
}

当点击左侧菜单时，面包屑的内容相应修改，所以我们修改 CommonAside.vue ，之前已经有点击菜单的方法，我们修改 menuClick，使用 this.$store.commit 来调用 selectMenu 方法，然后传入点击菜单的数据

menuClick(item) {
      ......
      this.$store.commit('selectMenu',item)
}

我们在 tab.js 中增加 selectMenu 方法

// 更新面包屑数据
        selectMenu(state,val){
            // 判断添加数据是否为首页
            if(val.name !== 'home'){
                // 判断如果不存在
                const index = state.tabList.findIndex(item => item.name === val.name )
                // 如果不存在
                if(index === -1){
                    state.tabList.push(val)
                }
            }
        }

由于面包屑默认数据就是首页，所以 selectMenu 方法先判断是不是首页，不是首页再执行下面的代码

然后判断 tabList 中是否存在所点击的菜单数据，如果存在就没有必要重复添加。是否存在可以使用 findIndex，传入一个函数，如果存在则返回一个索引，如果不存在返回 -1

接下来我们在 CommonHeader.vue 中使用面包屑数据，当然我们可以使用this.$store.state.tab.tabList来获取，我们学习一个更简单的方法，使用 mapstate

在这里插入代码片

tags 是我们起的数据别名，后边跟一个函数，返回的就是我们需要的数据，由于返回的是一个对象，我们使用扩展运算符 ...将 mapState 进行结构

然后面包屑内容使用 v-for 循环 tags 即可

<el-breadcrumb separator="/">
	<el-breadcrumb-item v-for="item in tags" :to="{ path: item.path }"