vue动态面包屑兼容全路径回退(含上级路径参数)

最新推荐文章于 2024-02-23 16:48:02 发布

喜樂的CC

最新推荐文章于 2024-02-23 16:48:02 发布

阅读量3.5k

点赞数

分类专栏： web前端 Vue 文章标签： vue vue.js 前端

转载请注明出处链接, 谢谢合作.

本文链接：https://blog.csdn.net/qq_40259641/article/details/123825368

版权

web前端同时被 2 个专栏收录

171 篇文章

订阅专栏

Vue

47 篇文章

订阅专栏

本文介绍了一种在Vue应用中优化面包屑导航的方法，解决了带有参数的路由在生成面包屑时无法正确显示的问题。通过将全路径参数(fullPath)加入到路由匹配对象(matched)中，实现了动态面包屑的准确跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

如嵌套路由, 一级是/home, 二级是/home/user, 这种做成动态面包屑点击面包屑内容从二级/user跳转回一级/home是完全没有问题的.

但是如果home带有参数如/home?id=1, 那么vue的$route的matched是拿不到?id=1的, 只有全路径fullPath参数才能拿到.

如图面包屑需要的是fullPath,但是面包屑是根据matched生成的, 而matched里面没有fullPath

解决思路：把fullPath放入matched中

解决代码如下

// js
data() {
    return {
      newRoute: {},
    }
},
watch: {
    $route: function(to) {
      const { fullPath, matched } = to
      // 全路径存储
      matched[matched.length - 1].fullPath = fullPath
      // 保留上一次父级全路径
      const fromMatched = this.newRoute.matched
      if (fromMatched && fromMatched.length < matched.length) {
        fromMatched.push(matched[matched.length - 1])
        this.newRoute = { ...to, matched: fromMatched }
      } else {
        this.newRoute = { ...to, matched: matched }
      }
    },
},

// html
<t-breadcrumb
      v-if="newRoute.matched && newRoute.matched.length > 0"
    >
      <template v-slot:default>
        <template v-for="(item, index) in newRoute.matched">
          <t-breadcrumbItem
            v-if="item.name"
            :to="item.fullPath ? item.fullPath : item.path"
            :key="index"
            >{{ item.name }}</t-breadcrumbItem
          >
        </template>
      </template>
      <template v-slot:separator>/</template>
</t-breadcrumb>