vue3面包屑最简单的写法

最新推荐文章于 2025-02-15 23:09:45 发布

原创最新推荐文章于 2025-02-15 23:09:45 发布 · 2.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #es6

vue3日常专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Vue3简化面包屑导航实现的方法，通过利用Vuex和route.matched来动态获取页面标题。在路由配置中设置meta数据，并在头部组件中通过计算属性读取这些数据，实现面包屑导航的功能。这种方法适用于多层路由结构，能够方便地遍历显示所有层级的标题。

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

{ path: '/', component: layout, children: [
            {
                path: 'home',
                component: home,
                name: 'home', 
                meta: {          //主要是meta里面得带标题数据
                    title:'首页'
                }
            },
         ]
}

header的代码：

import { computed, ComputedRef } from 'vue'
import { useRoute } from 'vue-router'

const route=useRoute()

let current:ComputedRef<any>=computed(()=>{
   let result=[];
   for (let i = 1; i < route.matched.length; i++) {
        result.push(route.matched[i].meta.title);
      }
   return result;
})

最后完成的效果就是这样