el-breadcrumb根据路由跳转动态切换标题

最新推荐文章于 2024-07-17 15:36:40 发布

小付-小付

最新推荐文章于 2024-07-17 15:36:40 发布

阅读量571

点赞数

文章标签： vue.js javascript 前端 elementui 前端框架

本文链接：https://blog.csdn.net/weixin_58431406/article/details/127628602

版权

 <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/console' }"
                >首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="name in breadList" :key="name">
                {{ name }}
              </el-breadcrumb-item>
   </el-breadcrumb>

menuslist: [],//菜单栏
breadList: [],

 getBreadcrumb() {
      var ms = [];
      this.menuslist.forEach((m1) => {
        const m11 = {
          parent: [],
          menu: m1,
        };
        ms.push(m11);
        m1.childMenus.forEach((m2) => {
          const m22 = {
            parent: [m1.name],
            menu: m2,
          };
          ms.push(m22);
          m2.childMenus.forEach((m3) => {
            const m33 = {
              parent: [m1.name, m2.name],
              menu: m3,
            };
            ms.push(m33);
          });
        });
      });

      var r = this.$route;
      var nList = [];
      ms.forEach((m) => {
        if (m.menu.url == r.path) {
          var ns = m.parent;
          ns.push(m.menu.name);
          nList = ns;
        }
      });
      this.breadList = nList;
    },

 created() {
    setTimeout(() => {
      this.getBreadcrumb();
    }, 200);
  },
  watch: {
    $route(route) {
      this.getBreadcrumb();
    },
  },