hrms-manual/src/modules/router.ts

import type { RouteRecordRaw } from "vue-router";
// import { ref } from "vue";
// import { useRoute } from "vue-router";
const Error404NotFound = () => import("@/views/Error404NotFound.vue");
const data = await fetch("/toc.json").then((r) => r.json());

// const routes = useRoute();
// const hasQueryParam = ref<boolean>(false);
const mainDataInfo = data.filter((v: any) => v.path);
const manual = data.filter((v: any) => v.children);

const mergeManual: any[] = [];

manual.forEach((v: any) => {
  if (v.children) {
    v.children.forEach((i: any) => {
      if (i.children) {
        i.children.forEach((item: any) => {
          if (item.children) {
            mergeManual.push(...item.children);
          } else {
            mergeManual.push(item);
          }
        });
      } else {
        mergeManual.push(i);
      }
    });
  }
});

const manualRoute = mergeManual.map(
  (v): { path: string; name: string; component: Function } => {
    return {
      path: v.path,
      name: "Manual",
      component: () => import("@/modules/01_manual/MainPage.vue"),
    };
  }
);

const route: RouteRecordRaw[] = [
  {
    path: "/manual/:name",
    name: "Manual",
    component: () => import("@/modules/01_manual/MainPage.vue"),
    beforeEnter: (to, from, next) => {
      const mergeAll = [...mainDataInfo, ...manualRoute];
      const itemExists = mergeAll.some(
        (item) => item.path === window.location.pathname
      );

      if (itemExists) {
        next();
      } else {
        next({
          name: "Error404NotFound",
          params: { pathMatch: to.path.substring(1).split("/") },
          query: to.query,
        });
      }
    },
  },
  {
    path: "/build-and-deploy",
    name: "BuildAndDeploy",
    component: () => import("@/modules/02_pages/MainPage.vue"),
  },
  {
    path: "/debug",
    name: "Debug",
    component: () => import("@/modules/02_pages/MainPage.vue"),
  },
  // {
  //   path: "/:name",
  //   name: "Pages",
  //   component: () => import("@/modules/02_pages/MainPage.vue"),
  // },
  {
    path: "/:pathMatch(.*)*",
    name: "Error404NotFound",
    component: Error404NotFound,
    props: (route) => ({ query: route.query }),
  },
];

export default route;