vue动态路由实现多级嵌套面包屑的思路与方法

}else{
this.$store.commit('breadListStateRemove',parseInt(breadNumber)+1);//如果往回点面包屑导航，截取；
}
this.breadlist=this.$store.state.breadListState;
console.log(this.breadlist);
}
},
watch: {
$route () {
this.getBreadcrumb();
}
},
}
</script>

状态管理store.js代码：

export default store = new Vuex.Store({
 state: {
 breadListState:[
  {name:'首页',path:'/'}
 ] },
 mutations: {
 breadListStateAdd(state,obj){
  state.breadListState.push(obj);
 },
 breadListStateRemove(state,num){
  state.breadListState=state.breadListState.slice(0,num);
 }
 }
})

路由route.js代码：

{
 path: '/',
 name: '首页',
 component: Main,
 redirect:'/home',
 children:[
  {path: '/a',name: 'A页面',component: APage},
  {path: '/b/:id',name: 'B页面',component: BPage},
  {path: '/bdetail/:id',name: 'C页面',component: CPage},
 ]} 

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。