路由动态生成面包屑导航

最新推荐文章于 2024-05-04 18:47:36 发布

一枚平平无奇的冲浪者

最新推荐文章于 2024-05-04 18:47:36 发布

阅读量166

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45272615/article/details/132538612

版权

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

<script>
export default {
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
  data() {
    return {
      breadList: [],
    };
  },
  methods: {
    isHome(route) {
      return route.name === "main";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/main", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    },
  },
};
</script>

<style>
</style>

路由配置：

const routes = [{

        path: '',
        redirect: '/login',
    },
    ......
    ......
    ......
    {
        name: 'main',
        path: '/main',
        component: () => import('@/pages/main/mainPage'),
        meta: {
            title: "首页"
        },

    ......
    ......
    ......
    }

]