4pc/src/router.ts

import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import { UserStatus, userStatus } from "./store/user";
import { watchEffect } from "vue";

const history = createWebHashHistory();
const routes: RouteRecordRaw[] = [
  {
    path: "/down-vision",
    name: "down-vision",
    component: () => import("@/view/down-vision.vue"),
  },
  {
    path: "/login",
    name: "login",
    meta: { title: "登录" },
    component: () => import("@/view/login.vue"),
  },
  {
    path: "/tree",
    name: "query-tree",
    meta: { title: "登录" },
    component: () => import("@/view/step-tree/example/example.vue"),
  },
  {
    path: "/",
    name: "main-layout",
    component: () => import("@/view/layout/nav.vue"),
    children: [
      {
        path: "relics",
        name: "relics",
        meta: { title: "文物普查" },
        component: () => import("@/view/relics.vue"),
      },
      {
        path: "relics/:relicsId",
        children: [
          {
            path: "",
            name: "map",
            meta: { title: "文物", navClass: "map" },
            component: () => import("@/view/map/map.vue"),
          },
          {
            path: "pano/:pid",
            name: "pano",
            meta: { title: "点位", navClass: "pano" },
            component: () => import("@/view/pano/pano.vue"),
          },
        ],
      },
      {
        path: "scene",
        name: "scene",
        meta: { title: "场景管理" },
        component: () => import("@/view/scene.vue"),
      },
      {
        path: "device",
        name: "device",
        meta: { title: "设备管理" },
        component: () => import("@/view/device.vue"),
      },
    ],
  },
  {
    path: "/query",
    name: "query-main-layout",
    component: () => import("@/view/layout/nav.vue"),
    children: [
      {
        path: "relics/:relicsId",
        children: [
          {
            path: "",
            name: "query-map",
            meta: { title: "文物", navClass: "map" },
            component: () => import("@/view/map/map.vue"),
          },
          {
            path: "pano/:pid",
            name: "query-pano",
            meta: { title: "点位", navClass: "pano" },
            component: () => import("@/view/pano/pano.vue"),
          },
        ],
      },
    ],
  },
];

export const findRoute = (
  routeName: string,
  fullPath = false,
  routeAll = routes
): RouteRecordRaw | null => {
  for (const route of routeAll) {
    if (route.name === routeName) {
      return route;
    } else if (route.children) {
      const childRoute = findRoute(routeName, fullPath, route.children);
      if (childRoute) {
        return fullPath ? { ...route, children: [childRoute] } : childRoute;
      }
    }
  }
  return null;
};

export const router = createRouter({ history, routes });
export const setDocTitle = (title: string) => {
  document.title = title + "-不可移动文物管理平台";
};

watchEffect(() => {
  const routeName = router.currentRoute.value.name?.toString();
  if (routeName === "login" && userStatus.value === UserStatus.LOGINED) {
    router.replace({ name: "scene" });
  } else if (
    routeName &&
    routeName !== "login" &&
    !routeName.includes("query") &&
    userStatus.value === UserStatus.NOT_LOGIN
  ) {
    router.replace({ name: "login" });
  }
});

router.beforeEach((to, _, next) => {
  if (!to.name || to.name === "main-layout") {
    if (userStatus.value !== UserStatus.NOT_LOGIN) {
      router.replace({ name: "scene" });
    } else {
      router.replace({ name: "login" });
    }
    return;
  }

  if (to.meta?.title) {
    setDocTitle(to.meta.title as string);
  }
  next();
});