vue 面包屑路由动态实现应用

最新推荐文章于 2024-08-31 14:31:49 发布

江北彭于晏

最新推荐文章于 2024-08-31 14:31:49 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript html5 css css3

本文链接：https://blog.csdn.net/qq_45062261/article/details/106022806

版权

项目：vue 后台管理系统 UI: element-ui

路由对象 matched 属性

首先我们先来看看官方对 matched 的介绍。

matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录。

可以看到当我们定义好路由结构以后，我们就可以获取到当前页面的路由记录。

首先我们先创建一个面包屑的组件。

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [] // 路由集合
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  methods: {
    isHome(route) {
      return route.name === "Home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      console.log(matched)
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/Home", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    }
  },
  created() {
    this.getBreadcrumb();
  }
};
</script>

<style lang="scss" scoped>
</style>

创建完组件之后，在需要的地方注入即可

定义的路由信息如下