2022.5.18上午关于this.$route的思路

export const getUserMenuList = () => {
  // return new Promise((resolve) => {
  //   $ui.showLoading("正在获取菜单");
  //   setTimeout(() => {
  //     resolve(routes);
  //     $ui.hideLoading();
  //   }, 500);
  // });

  return server({
    url: "",
    method: "get",
  }).then((res) => {
    let originList = res.data;
    function diMenu(list) {
      list.sort((a, b) => a.sort - b.sort);
      return list.map((item) => {
        return {
          path: item.router,
          name: item.router,
          component: () => import(`@/views${item.componentPath}`),
          children:
            item.children && item.children.length
              ? diMenu(item.children)
              : null,
          meta: {
            title: item.name,
            hidden: item.type == 10,
          },
        };
      });
    }
    return diMenu(originList);
  });
};

利用this.$route.matched实现面包屑

先打印下this.$route:

<template>
  <div class="qz-bread flex-jasc">
    <div class="flex-aic">
      <div
        class="qz-bread-item flex-aic"
        v-for="(item, index) in navs"
        :key="index"
      >
        <div>{{ item.title || item }}</div>
        <div class="qz-bread-item-split" v-if="index < navs.length - 1">/</div>
      </div>
    </div>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  name: "QzBread",
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      navs: [],
    };
  },
  mounted() {
    let navs = [];
    if (this.list) {
      navs = [...this.list];
    } else {
      navs = this.$route.matched
        .filter((v) => v?.meta?.title || "")
        .map((v) => ({
          path: v.path || "",
          title: v.meta.title,
        }));
    }
    this.navs = navs;
  },
};
</script>