vue3面包屑最简单的写法

      面包屑的写法有很多种，最开始我的想法是在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的代码：