UI3/src/router/Index.ts

import { createRouter, createWebHashHistory, type RouteLocationNormalized, type RouteRecordRaw } from "vue-router"
import appStore from "@/stores"
import configs from "@/core/config/Index"
import { staticRotuer } from "./statictRouter"
export const to404: RouteRecordRaw = {
  path: "/:pathMatch(.*)*",
  name: "to404",
  redirect: "/404",
}
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/DataBoard/index",
    name: configs.MAIN_ROUTER_NAME,
    component: () => import("@/layouts/main-layout/MainLayout.vue"),
    meta: {
      middleware: "auth",
    },
    children: [
      // {
      //   path: "/dashboard",
      //   name: "dashboard",
      //   component: () => import("@/views/dashboard/Index.vue"),
      //   meta: {
      //     pageTitle: "Dashboard",
      //     breadcrumbs: ["Dashboards"],
      //   },
      // },
    ],
  },
  {
    path: "/",
    component: () => import("@/layouts/AuthLayout.vue"),
    children: [
      {
        path: "/sign-in",
        name: configs.SIGN_ROUTE_NAME,
        component: () => import("@/views/account/SignIn.vue"),
        meta: {
          pageTitle: "登录",
        },
      },
    ],
  },
  {
    path: "/",
    component: () => import("@/layouts/SystemLayout.vue"),
    children: [
      {
        // the 404 route, when none of the above matches
        path: "/404",
        name: "404",
        component: () => import("@/views/error/404.vue"),
        meta: {
          pageTitle: "Error 404",
        },
      },
      {
        path: "/500",
        name: "500",
        component: () => import("@/views/error/500.vue"),
        meta: {
          pageTitle: "Error 500",
        },
      },
    ],
  },
  {
    path: "/DataCenter",
    name: "DataCenter",
    meta: {
      pageTitle: "数据大屏",
    },
    component: () => import("@/views/dashboard/DataCenter.vue"),
  },
  {
    path: "/icon",
    name: "icon",
    meta: {
      pageTitle: "图标",
    },
    component: () => import("@/layouts/Icon.vue"),
  },
  ...staticRotuer,
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

const hasNecessaryRoute = (to: RouteLocationNormalized) => {
  if (router.hasRoute(to.name ?? "")) {
    return true
  }
  const list = router.getRoutes()
  for (let i = 0; i < list.length; i++) {
    const r = list[i]
    if (r.path === to.path || (r.name && r.name === to.name)) {
      return true
    }
  }
  return false
}
let isReload = true
router.beforeEach((to, from, next) => {
  const configStore = appStore.bodyConfigStore
  //解决切换路由tooltip不消失
  document.querySelectorAll(".tooltip").forEach((v) => {
    v.remove()
  })
  // current page view title
  document.title = `${to.meta.pageTitle ?? ""} - ${import.meta.env.VITE_APP_NAME}`

  if (to.name != configs.SIGN_ROUTE_NAME && (to.meta.auth ?? true)) {
    const authStore = appStore.authStore
    // 在每次页面更改之前验证身份验证令牌
    authStore.verifyAuth()
    if (!authStore.isAuthenticated && !hasNecessaryRoute(to)) {
      console.log("需要登录")
      next({ name: configs.SIGN_ROUTE_NAME, params: { redirectUrl: to.fullPath } })
    } else {
      //刷新页面后重新加载路由菜单
      if (isReload) {
        isReload = false
        appStore.menuStore.loadMenus()
        next(to)
      } else {
        // 将配置重置为初始状态
        configStore.resetLayoutConfig()
        //在页面访问之前检查页面是否需要身份验证
        next()
      }
    }
  } else {
    next()
  }

  // Scroll page to top on every route change
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  })
})

export default router