element ui 实现动态改变面包屑

效果

↓------------------------------------------------------------------------------------------------------------------------------------------------------------------

html代码：

  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item
      v-for="(item, index) in list[0].meta"
      :key="index"
      :to="item.url"
    >
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>

JS代码：

根据监听路由变化来动态绑定

  methods: {
 	//如果用户重新刷新页面，因为页面刷新$route没有变化(监听不到)所以要在页面刚进入的时候判断一下当前路由路径(然后再一次渲染)
    getMatched() {
      this.list = this.$route.matched;
      if (this.$route.path == "/goods/sell") {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/sell" },
          { title: "商品列表", url: "/goods/sell" },
        ];
      } else if (this.$route.path == "/goods/Edit") {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/sell" },
          { title: "商品列表", url: "/goods/sell" },
          { title: "商品详情页", url: "/goods/Edit" },
        ];
      } else if (this.$route.path == "/goods/examine") {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/examine" },
          { title: "审核商品", url: "/goods/examine" },
        ];
      }
    },
  },
  created() {
    this.getMatched()
  },
  watch: {
    $route(to, from) {
      console.log(from.path); //从哪来
      console.log(to.path); //到哪去
      if (to.path == "/goods/sell" [根据自己页面的路径来修改]) {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/sell" },
          { title: "商品列表", url: "/goods/sell" },
        ];
      } else if (to.path == "/goods/Edit") {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/sell" },
          { title: "商品列表", url: "/goods/sell" },
          { title: "商品详情页", url: "/goods/Edit" },
        ];
      } else if (to.path == "/goods/examine") {
        this.list[0].meta = [
          { title: "商品管理", url: "/goods/examine" },
          { title: "审核商品", url: "/goods/examine" },
        ];
      }
    },
  },

本文地址：https://blog.csdn.net/m0_49774517/article/details/110261824