最近我在写一个“项目”？遇到了以前没有接触到的一个知识点——“面包屑”。

写下来，我所理解的思路，一是为了看能不能帮助到大家，二是自己肯定不是已经完全理解、印在脑子里了，所以方便自己随时复习~

我们先来看一下功能：

当我们点击【aside 】区的【menu】时，我们的【header】上会添加相应的【span】，且会跳转相应的路由；细心的同学可以发现，在我们的展示区上方会出现我们点击时相同名字的【tag】标签，它们也对应相应的路由跳转；并且呢，我们的【tag】标签可以删除，我们的“面包屑”也会进行相应的删除。这就是我们的“面包屑”与【Tag】相应的功能。

而对于这个系统的代码层面，我们应该怎么实现“面包屑”与【Tag】以及相互联动的功能呢？

首先我们应该要知道，我们的“面包屑”它所在的区域是我们的【Header】部分，而【Tag】属于内容区，但是它又不属性每一个页面，而是属性公共部分。所以“面包屑”与【Tag】处在不同的两个组件中，这就牵扯到了不同组件间的通信，在这里，我们用到了vuex对我们不同组件间的数据的交互。

Header.vue:

{{item.label}}

computed:{// ...mapState({//   tags:state=>state.tab.tabList// })tags(){return this.$store.state.tab.tabList}}

 state:{isCollapse: false,//控制菜单是否展开tabList:[{path:'/',name:'home',label:'首页',icon:'s-home',url:'Home/Home'}// 面包屑的数据]},

起初，我们给state中定义一个初始数据（首页的数据），for循环state中的tabList这个数组的每一项，并且动态渲染其中的label和跳转路径。

Asider.vue:

{{isCollapse?'后台':'通用后台管理系统'}}
{{item.label}}        {{subItem.label}}

  methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},toMenu(item){this.$router.push(item.path)this.$store.commit('SELECTMENU',item)},    },computed:{nochild(){return this.menu.filter(item =>!item.children)},haschild(){return this.menu.filter(item =>item.children)},isCollapse(){return this.$store.state.tab.isCollapse}}

        SELECTMENU(state,val){// 判断添加的数据是否为首页if(val.name !== 'home'){const index = state.tabList.findIndex(item=>item.name === val.name)// 当Index为-1时，表示tabList中没有，则可以添加面包屑if(index === -1){state.tabList.push(val)}}},

我们的Menu分为有子级菜单和没有子级菜单的，“面包屑”和我们的一级菜单有关，所以我们可以给菜单绑定一个事件，当我们点击这个菜单时，我们把这个点击的路由信息添加到state的tabList中（使用state中的mutation方法添加），通过渲染，就形成了，点击一个一级菜单，我们的“面包屑”就添加一个。

Tags.vue:

computed:{...mapState({tags:state=>state.tab.tabList})}, 
methods:{// 调用store中的mutation...mapMutations(['closeTag']),// 点击TAG跳转路由clickTags(item){this.$router.push(item.path)},// 点击删除按钮，删除TAGhandleTag(item,index){// 调用mutation中的CLOSETAG事件this.closeTag(item)// 删除后的tags的长度const length = this.tags.length// 如果当前点击的tag的name 与当前路由的name不一致，不作反应if(item.name !== this.$route.name){return}// 点击删除的tag是最后一个if(index === length){this.$router.push({name:this.tags[index-1].name})}else{this.$router.push({name:this.tags[index].name})}}}

       // 删除指定tag标签closeTag(state,val){const index = state.tabList.findIndex(item => val.name === item.name)state.tabList.splice(index,1)}

首先，是点击【Tag】标签时，我们的路由跳转，这个很简单，我们可以给【Tag】标签绑定一个点击事件，当我们点击时，通过编程式路由，进行路由的跳转；第二步是，当我们点击标签上的关闭按钮时，我们的标签删除，和相应的路由跳转，在这其中，我们有一定的逻辑，详细代码写在上面了，有需要的同学可以看一下。删除标签用到了【Tag】上的close事件，点击调用handleTag事件，事件里调用mutation中的closeTag方法，遍历找到在tabList中与点击的路由相同name的项，用数组中splice方法删除，state中的数据被删除了，页面渲染的【Tag】自己也删除了。

我自己过了几遍，我自己大概能理解，如果有同学发现，哪里写错了，可以评论区指出来，大家一起学习，一起进步！！！

今天就到这了，希望对大家有帮助。拜比~