这节课完成面包屑和tag的布局，并且与左侧菜单联系，涉及组件间通信。
1.提前准备
首先我们先完成每个页面的路由，之前已经有home页面和user页面，缺少mail页面和其它选项下的page1和page2页面。在view文件夹下新建mail文件夹，新建index.vue，填充user页面的内容即可。在view下新建other文件夹，新建pageOne.vue和pageTwo.vue，页面内容简单填充即可。三个页面都要更改name属性，后面会用到，首字母大写。
示例：
配置路由：在路由主文件添加路由，路由位置在CommonAside的menu数组中保持偶一致。这里的name属性是小写，与上面不相同。
{
path:'/mail',
name:'mail',
component:()=>import('../view/mail')
},
{
path:'/page1',
name:'page1',
component:()=>import('../view/other/pageOne.vue')
},
{
path:'/page2',
name:'page2',
component:()=>import('../view/other/pageTwo.vue')
}测试发现商品管理可以正常跳转，但是其他的二级菜单不能跳转，原因是没有设置点击事件。为左侧导航栏二级菜单添加点击事件。为el-menu-item添加点击事件。
<el-menu-item-group
v-for="(subItem,subIndex) in item.children"
:key="subItem.path">
<el-menu-item
@click="clickMenu(subItem)"
:index="subIndex.toString()">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>2.面包屑功能
面包屑有数据记忆存储功能，每次点击导航栏后后记录选中的导航栏并列出。这里需要用到Vuex.Store,我们前面左侧导航栏的收起与展开同样使用到Vuex.Store，store可以看做是容器，里面有四个值，由State、Getters、Mutation、Actions这四种组成。在store下的tab.js文件，默认数据定义在state中，我们定义为一个数组tabsList，数组里有多个对象，但这里知识默认对象，对象里有四个属性，path、name、label、icon。currentMenu为一个临时变量，存储点击的tab。
state:{
isCollapse:false,
tabsList:[
{
path:'/',
name:'home',
label:'首页',
icon:'home'
}
],
currentMenu:null
},改变tabsList里的内容要用到Vuex.store的mutations。改变state数据的发都会以函数的形式写在mutations中，之后在页面调用即可。selectMenu函数接收两个参数，state和val，此时需要进行判断，当前点击的导航栏是不是首页，用name属性判断，判断传入的item.name是否等于‘home’，如果不是home，需要赋值val给currentMenu，这样currentMenu就会不断累加，最多为五个（首页、用户、商品、其他1、其他2）。此处还需要一个判断，判断当前点击的导航栏是是不是刚刚已经点击过来，点击过了不再进行累加，而是将面包屑跳转到点击过的那一个。这里用到findIndex（）方法。判断item.name里是否有val.name。 有的话为1，无的话为-1，无的话那么使用push（）方法将val累加到currentMenu。如果点击是‘home’的情况，currentMenu置空。
selectMenu(state,val){
if(val.name !== 'home'){
state.currentMenu = val
const result = state.tabsList.findIndex(item => item.name === val.name)
if(result === -1){
state.tabsList.push(val)
}
}else{
state.currentMenu = null
}
},在CommonAside中调用currentMenu，并传入item，item实际就menu数组中的任一对象。
clickMenu(item){
this.$router.push({
name:item.name
})
this.$store.commit('selectMenu',item)更改CommonHeader.vue，使用element ui的面包屑元素。
//element ui官方案例
<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>我们需要进行数据渲染，渲染成动态数据，v-for循环tags，:key使用item.path识别。{{}}表示动态渲染数据。
这里数据比较比较长，item--tags--tabsList--menu。tabsList里的数据也是menu动态加载进去的。
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
</el-breadcrumb>引入mapState，这个是vuex的辅助函数。
import { mapState } from 'vuex'在computed属性中进行注入，这里起了一个别名tags。
computed:{
...mapState({
tags:state => state.tab.tabsList
})
}效果：这里样式有问题，不过影响不大，后期可以自行更改。
页面会根据面包屑进行，路由也会自行更改。
3.tag区域
这个功能其实类似于面包屑，只是多了删除功能。使用element ui的tag组件。tag组件的close属性表示组件是否可以关闭。tag组件有两个触发事件click、close。分别是点击tag和删除tag。
tag组件为公共组件，在components下新建CommonTag.vue。v-for遍历tags，这里注意，首页tag是不能删除的，closable属性表示有删除按钮，后面可以附带条件。effect属性为主题（样式），表示为高亮显示。判断方法是根据路由地址和当前tag的名称是否一致，注意是route（不是router）一致则为dark（高亮），不一致为plain（白色）。添加改变tag事件和删除tag事件。这里用模块化，用函数实现。
<template>
<div class="tabs">
<el-tag
v-for="(tag,index) in tags"
:key="tag.name"
:closable="tag.name !== 'home'"
:effect="$route.name === tag.name ? 'dark' : 'plain'"
@click="changeMenu(tag)"
@close="handleClose(tag,index)"
size="small">
{{ tag.label }}
</el-tag>
</div>
</template>渲染tag，同样需要用到tabsList，引入mapState，在computed属性中注入，注入为三个点（...），这里同样将tabsList赋值给tags，两个页面的tags互不干扰。
<script>
import { mapState,mapMutations } from 'vuex'
export default{
name:'CommonTag',
data(){
return{
}
},
computed:{
...mapState({
tags:state => state.tab.tabsList
}) ,
},
methods:{
...mapMutations({
close:'closeTag'
}),
changeMenu()
handleClose()
},
}
</script>在mian.vue引入组件
import CommonTag from "../src/components/CommonTag.vue";
export default {
name: "Home",
components: {
CommonTag
},注意在el-header和el-main之间，因为这个组件并不属于header也不属于main，所以在中间。
<el-header>
<common-header></common-header>
</el-header>
<common-tag></common-tag>
<el-main>
<router-view></router-view>
</el-main>覆盖样式
<style lang="less" scoped>
.tabs{
padding: 20px;
.el-tag{
margin-right: 15px;
cursor: pointer;
}
}
</style>接下来完成点击事件个删除事件（重难点！！！），点击就是路由切换。methods里更改函数。
changeMenu(item){
this.$router.push({ name: item.name })
console.log(name)删除tag：
删除tag也会删除对应的面包屑，面包屑对应的是state.tabsList。首先拿到tag的总长度，总长度减1就是我们当前选中的tag，赋值给length，判断length和index的长度进行比较，如果这两个值相等，那么就表示此时我们选中的tag是tag中的最后一项。首先判断tag.name与当前的路由是否一致，如果不一致，不需要额外操作，直接return，即高亮在最后一个tag，删除的tag是非选中的tag，所以无需操作。
如果当前删除的tag是最后一个tag，那么高亮部分一个向左移动一格。如果当前菜单高亮才当在中间，并且你删除当前的菜单时，高亮显示向右移动一格。
handleClose(tag,index){
this.close(tag)
const length = this.tags.length - 1
if(tag.name !== this.$route.name){
return;
}
//高亮向左移动,这里视频代码错误，应该是上面不减1，下面减1.
if(index === length){
this.$router.push({
name: this.tags[index].name
})
}else{
this.$router.push({
name: this.tags[index - 1].name
})
}
}此时需要删除state下的tabsList，修改state必须使用mutations。因此需要在mutations中声明closeTag。
closeTag(state,val){
const result = state.tabsList.findIndex(item => item.name === val.name)
state.tabsList.splice(result,1)
}调用mutations
import { mapState,mapMutations } from 'vuex'
...mapMutations({
close:'closeTag'
}),总体CommonTag的script代码。
<script>
import { mapState,mapMutations } from 'vuex'
export default{
name:'CommonTag',
data(){
return{
}
},
computed:{
...mapState({
tags:state => state.tab.tabsList
}) ,
},
methods:{
...mapMutations({
close:'closeTag'
}),
changeMenu(item){
this.$router.push({ name: item.name })
console.log(name)
},handleClose(tag,index){
this.close(tag)
const length = this.tags.length - 1
if(tag.name !== this.$route.name){
return;
}
//高亮向左移动,这里视频代码错误，应该是上面不减1，下面减1.
if(index === length){
this.$router.push({
name: this.tags[index].name
})
}else{
this.$router.push({
name: this.tags[index - 1].name
})
}
},
}
}
</script>
