面包屑的写法有很多种,最开始我的想法是在vuex的store当中维护一个currentList,在左侧导航栏跳转页面后就清空currentList然后往里加当前页的标题,如下
store:
state:{
currentMenu:[]
}
mutations:{
ADD_CURRENT:(state:tagState,currName:string)=>{
state.currentMenu.push(currName)
},
CLEAR_CURRENT:(state:tagState)=>{
state.currentMenu=[];
},
}
aside和tags里的点击回调:
function changeMenu(tag: IMenu) {
store.commit('SELECT_MENU', tag)
router.push({ name: tag.name })
.then(() => {
store.commit('CLEAR_CURRENT')
for (let i = 1; i < route.matched.length; i++) {
store.commit('ADD_CURRENT', route.matched[i].meta.title)
}
})
}
但是我发现既然都用了route.matched了为什么不直接在存放面包屑的header中直接用计算属性读取route.matched的标题数据呢?所以代码如下
router的代码: