refactor!: 移除自定义 Route.recordRaw 类型，改用 RouteRecordRaw 类型

Author: hooray

src/global.d.ts

@@ -225,12 +225,8 @@ declare module 'vue-router' {
 }
 
 declare namespace Route {
-  interface recordRaw extends Omit<RouteRecordRaw, 'meta' | 'children'> {
-    meta: RouteMeta
-    children?: recordRaw[]
-  }
   interface recordMainRaw {
-    meta: {
+    meta?: {
       title?: string | Function
       icon?: string
       auth?: string | string[]

src/layouts/components/Search/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup name="Search">
 import { cloneDeep } from 'lodash-es'
 import hotkeys from 'hotkeys-js'
+import type { RouteRecordRaw } from 'vue-router'
 import { isExternalLink } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
@@ -133,23 +134,23 @@ onMounted(() => {
   }
 })
 
-function hasChildren(item: Route.recordRaw) {
+function hasChildren(item: RouteRecordRaw) {
   let flag = true
-  if (item.children && item.children.every(i => i.meta.sidebar === false)) {
+  if (item.children?.every(i => i.meta?.sidebar === false)) {
     flag = false
   }
   return flag
 }
-function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string, breadcrumb?: (string | Function | undefined)[]) {
+function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: (string | Function | undefined)[]) {
   arr.forEach((item) => {
-    if (item.meta.sidebar !== false) {
+    if (item.meta?.sidebar !== false) {
       const breadcrumbTemp = cloneDeep(breadcrumb) || []
       if (item.children && hasChildren(item)) {
-        breadcrumbTemp.push(item.meta.title)
-        getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta.icon ?? icon, breadcrumbTemp)
+        breadcrumbTemp.push(item.meta?.title)
+        getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta?.icon ?? icon, breadcrumbTemp)
       }
       else {
-        breadcrumbTemp.push(item.meta.title)
+        breadcrumbTemp.push(item.meta?.title)
         let path = ''
         if (isExternalLink(item.path)) {
           path = item.path
@@ -158,8 +159,8 @@ function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string,
           path = basePath ? [basePath, item.path].join('/') : item.path
         }
         sourceList.value.push({
-          icon: item.meta.icon ?? icon,
-          title: item.meta.title,
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
           breadcrumb: breadcrumbTemp,
           path,
         })

src/router/modules/breadcrumb.example.ts

@@ -1,8 +1,8 @@
-import type { Route } from '@/global'
+import type { RouteRecordRaw } from 'vue-router'
 
 const Layout = () => import('@/layouts/index.vue')
 
-const routes: Route.recordRaw = {
+const routes: RouteRecordRaw = {
   path: '/breadcrumb_example',
   component: Layout,
   redirect: '/breadcrumb_example/list1',

src/router/modules/multilevel.menu.example.ts

@@ -1,8 +1,8 @@
-import type { Route } from '@/global'
+import type { RouteRecordRaw } from 'vue-router'
 
 const Layout = () => import('@/layouts/index.vue')
 
-const routes: Route.recordRaw = {
+const routes: RouteRecordRaw = {
   path: '/multilevel_menu_example',
   component: Layout,
   redirect: '/multilevel_menu_example/page',

src/router/routes.ts

@@ -1,12 +1,13 @@
 import { setupLayouts } from 'virtual:generated-layouts'
 import generatedRoutes from 'virtual:generated-pages'
+import type { RouteRecordRaw } from 'vue-router'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 import BreadcrumbExample from './modules/breadcrumb.example'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
 // 固定路由（默认路由）
-const constantRoutes: Route.recordRaw[] = [
+const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/login',
     name: 'login',
@@ -26,7 +27,7 @@ const constantRoutes: Route.recordRaw[] = [
 ]
 
 // 系统路由
-const systemRoutes: Route.recordRaw[] = [
+const systemRoutes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('@/layouts/index.vue'),
@@ -94,7 +95,7 @@ const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
 
 const asyncRoutesByFilesystem = setupLayouts(generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
-})) as Route.recordRaw[]
+}))
 
 export {
   constantRoutes,

src/store/modules/route.ts

@@ -1,18 +1,19 @@
 import { cloneDeep } from 'lodash-es'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
 import useUserStore from './user'
 import api from '@/api'
 import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
 import type { Route } from '@/global'
 
-function hasPermission(permissions: string[], route: Route.recordMainRaw | Route.recordRaw) {
+function hasPermission(permissions: string[], route: Route.recordMainRaw | RouteRecordRaw) {
   let isAuth = false
   if (route.meta?.auth) {
     isAuth = permissions.some((auth) => {
-      return typeof route.meta.auth === 'string'
+      return typeof route.meta?.auth === 'string'
         ? route.meta.auth === auth
-        : typeof route.meta.auth === 'object'
+        : typeof route.meta?.auth === 'object'
           ? route.meta.auth.includes(auth)
           : false
     })
@@ -23,7 +24,7 @@ function hasPermission(permissions: string[], route: Route.recordMainRaw | Route
   return isAuth
 }
 
-function filterAsyncRoutes<T extends Route.recordMainRaw[] | Route.recordRaw[]>(routes: T, permissions: string[]): T {
+function filterAsyncRoutes<T extends Route.recordMainRaw[] | RouteRecordRaw[]>(routes: T, permissions: string[]): T {
   const res: any = []
   routes.forEach((route) => {
     if (hasPermission(permissions, route)) {
@@ -59,31 +60,34 @@ function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/
 }
 
 // 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
-function flatAsyncRoutes<T extends Route.recordRaw>(routes: T): T {
+function flatAsyncRoutes<T extends RouteRecordRaw>(routes: T): T {
   if (routes.children) {
     routes.children = flatAsyncRoutesRecursive(routes.children, [{
       path: routes.path,
-      title: routes.meta.title,
-      hide: !routes.meta.breadcrumb && routes.meta.breadcrumb === false,
+      title: routes.meta?.title,
+      hide: !routes.meta?.breadcrumb && routes.meta?.breadcrumb === false,
     }], routes.path)
   }
   return routes
 }
-function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): Route.recordRaw[] {
-  const res: Route.recordRaw[] = []
+function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): RouteRecordRaw[] {
+  const res: RouteRecordRaw[] = []
   routes.forEach((route) => {
     if (route.children) {
       const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
       const tmpBreadcrumb = cloneDeep(breadcrumb)
-      if (route.meta.breadcrumb !== false) {
+      if (route.meta?.breadcrumb !== false) {
         tmpBreadcrumb.push({
           path: childrenBaseUrl,
-          title: route.meta.title,
-          hide: !route.meta.breadcrumb && route.meta.breadcrumb === false,
+          title: route.meta?.title,
+          hide: !route.meta?.breadcrumb,
         })
       }
       const tmpRoute = cloneDeep(route)
       tmpRoute.path = childrenBaseUrl
+      if (!tmpRoute.meta) {
+        tmpRoute.meta = {}
+      }
       tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
       delete tmpRoute.children
       res.push(tmpRoute)
@@ -109,9 +113,12 @@ function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.b
       const tmpBreadcrumb = cloneDeep(breadcrumb)
       tmpBreadcrumb.push({
         path: tmpRoute.path,
-        title: tmpRoute.meta.title,
-        hide: !tmpRoute.meta.breadcrumb && tmpRoute.meta.breadcrumb === false,
+        title: tmpRoute.meta?.title,
+        hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
       })
+      if (!tmpRoute.meta) {
+        tmpRoute.meta = {}
+      }
       tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
       res.push(tmpRoute)
     }
@@ -126,14 +133,14 @@ const useRouteStore = defineStore(
     state: () => ({
       isGenerate: false,
       routes: [] as Route.recordMainRaw[],
-      fileSystemRoutes: [] as Route.recordRaw[],
+      fileSystemRoutes: [] as RouteRecordRaw[],
       currentRemoveRoutes: [] as Function[],
     }),
     getters: {
       // 扁平化路由（将三级及以上路由数据拍平成二级）
       flatRoutes: (state) => {
         const settingsStore = useSettingsStore()
-        const routes: Route.recordRaw[] = []
+        const routes: RouteRecordRaw[] = []
         if (state.routes) {
           if (settingsStore.app.routeBaseOn !== 'filesystem') {
             state.routes.forEach((item) => {
@@ -171,7 +178,7 @@ const useRouteStore = defineStore(
           }
           // 设置 routes 数据
           this.isGenerate = true
-          this.routes = accessedRoutes.filter(item => item.children?.length !== 0)
+          this.routes = accessedRoutes.filter(item => item.children?.length !== 0) as any
           resolve()
         })
       },
@@ -195,13 +202,13 @@ const useRouteStore = defineStore(
             }
             // 设置 routes 数据
             this.isGenerate = true
-            this.routes = accessedRoutes.filter(item => item.children.length !== 0)
+            this.routes = accessedRoutes.filter(item => item.children.length !== 0) as any
             resolve()
           })
         })
       },
       // 根据权限动态生成路由（文件系统生成）
-      generateRoutesAtFilesystem(asyncRoutes: Route.recordRaw[]) {
+      generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
         // eslint-disable-next-line no-async-promise-executor
         return new Promise<void>(async (resolve) => {
           const settingsStore = useSettingsStore()
@@ -217,7 +224,7 @@ const useRouteStore = defineStore(
           }
           // 设置 routes 数据
           this.isGenerate = true
-          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0)
+          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0) as any
           resolve()
         })
       },