监听路由实现多级面包屑

参考文章

文章1
文章2

方式1:监听路由

在没有更多路由配置的情况下，一级菜单单纯依靠监听路由实现多级面包屑
项目地址
主要代码

  watch: {
    $route(to) {
      /**
       * 检查是否为第一级导航
       * 否：进行后续操作
       * 是：重置面包屑
       */
      if (
        to.path !== "/daohang1" &&
        to.path !== "/daohang2" &&
        to.path !== "/daohang3"
      ) {
        /**
         * 检查面包屑集合中有无当前跳转的路由
         * 有：删除后方面包屑
         * 无：新增面包屑
         */
        let index = this.breadList.findIndex((item) => {
          return item.path == to.path;
        });
        if (index !== -1) {
          this.breadList.splice(index + 1);
        } else {
          /**
           * 禁止面包屑最后一层可点击
           */
          let obj;
          if (to.path == "/momentsshare" || to.path == "/myfavor") {
            obj = {
              label: to.name,
              path: "",
            };
          } else {
            obj = {
              label: to.name,
              path: to.path,
            };
          }
          this.breadList = [...this.breadList, obj];
        }
      } else {
        this.breadList = [
          {
            label: to.name,
            path: to.path,
          },
        ];
      }
    },
  },

方式2:路由配置

待定

注意

记录过程中遇到的一些小问题
1、redirect要搭配<router-view />一起使用