JS通过子级来寻找父级及以上连接关系(可应用于面包屑)

应用场景：以vue3+TS+pinia为框架搭建的后台管理系统，由于做了路由的三级及三级以上的keep-alive缓存，需要手动来实现面包屑功能。

一、mock数据

[
      {
        path: "/layout/home",
        name: "homes",
        meta: { title: "首页" },
        children: [],
      },
      {
        path: "/page",
        name: "page",
        meta: { title: "页面", rootName: "page" },
        children: [
          {
            path: "/page/page1",
            name: "page1",
            meta: { title: "页面1", parentID: "page", rootName: "page" },
            children: [
              {
                path: "/page/page1/page1-1",
                name: "page1-1",
                meta: { title: "页面1", parentID: "page1", rootName: "page" },
              },
            ],
          },
          {
            path: "/page/page2",
            name: "page2",
            meta: { title: "页面2", parentID: "page", rootName: "page" },
            children: [],
          },
        ],
      },
]

二、处理逻辑

  actions: {
    /**
     *
     * @param targetRoute 目标路径
     * @param rootTree 路径节点
     * @returns 是否找到 找到不继续进行了
     */
    findParentPath(targetRoute: Router, rootTree: Router[]): Boolean {
      for (let i = 0; i < rootTree.length; i++) {
        let itemTree = rootTree[i];
        // 匹配上记录一下
        if (targetRoute.name == itemTree.name) {
          this.breadcrumbsList.unshift(itemTree);
          return true;
        }
        // 查找子集
        if (itemTree.children && itemTree.children.length > 0) {
          let result = this.findParentPath(targetRoute, itemTree.children);
          // 如果在子集中找到需要将此项记录
          if (result) {
            this.breadcrumbsList.unshift(itemTree);
            return true;
          }
        }
      }
      return false;
    },
  },

四、调用

    /**
     * 路径匹配
     * @param item 当前路由项
     */
    matchingPath(itemTree: Router) {
      // 清空面包屑列表
      this.breadcrumbsList = [];
      //   根节点
      let rootTree = this.menuTree.filter(
        (item) => item.meta.rootName == itemTree.meta.rootName
      );
      if (rootTree[0]) {
        this.findParentPath(itemTree, rootTree);
      }
    }
 //最终的数据格式展示为
//[{xxx:xxx},{xxx:xxx},{xxx:xxx},...]