文章目录

• 面包屑
• tag

面包屑

Element ui 面包屑：显示当前页面的路径，快速返回之前的任意页面，完成效果如下：

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

首页活动管理活动列表活动详情

之前我们在 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 即可

{{item.label}}

样式需要进行修改

修改哪个 class 可以查看元素

......

tag

Element ui Tag

我们把这个功能封装成组件，在 components 下新建 CommonTag.vue，代码如下：

我们直接复制 Element UI 中的 tag 代码复制过来，因为数据和面包屑的内容是一样的，所以我们可以直接获取 vuex 中的面包屑数据，进行 v-for 循环即可

用 closable 设置是否可关闭，首页不可关闭，其他都可以

用 effect 设置主题，如果是当前路由则使用深色主题

因为使用了$route.name === item.name?'dark':'plain' 即路由name 是否和当前 tag name 相同，所以 router / index.js 中需要给路由添加 name 属性

//2、将路由与组件进行映射
const routes = [{//主路由path: '/',component: Main,redirect: '/home',children: [{path: 'home', name: 'home', component: Home},// 主页{path: 'user', name: 'user', component: User},// 用户管理{path: 'mall', name: 'mall', component: Mall},// 商品管理{path: 'page1', name: 'page1', component: PageOne},// 页面1{path: 'page2', name: 'page2', component: PageTwo},// 页面2]}
]

目前的结果：