vue+element 动态面包屑导航

最新推荐文章于 2025-03-29 14:17:07 发布

czx_2019

最新推荐文章于 2025-03-29 14:17:07 发布

阅读量1.8k

点赞数 2

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_38547641/article/details/108229583

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

在这里插入图片描述
核心代码

watch: {
  $route() {
    this.getBreadcrumb()
  }
}
methods: {
    getBreadcrumb() {
    
      console.log(this.$route.matched)  //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组

      if (Object.keys(this.$route.matched[0].meta).length > 0) {
        this.breadList = this.$route.matched
      } else {
        this.breadList = []
      }
    }

  },

<el-breadcrumb separator="/">
  <el-breadcrumb-item
    :to="{ path: '/home' }"
  >
    首页
  </el-breadcrumb-item>
  <el-breadcrumb-item
    :to="{path: item.path}"
    v-for="(item, index) in breadList"
    :key="index"
  >

    {{item.meta.title}}
  </el-breadcrumb-item>
</el-breadcrumb>