refactor(projects): 重构路由类型和路由元数据类型，重构多级菜单路由写法

src/interface/common/route.ts

@@ -1,26 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-/** 路由描述 */
-export interface CustomRouteMeta {
-  /** 路由名称 */
-  title?: string;
-  /** 缓存页面 */
-  keepAlive?: boolean;
-  /** 页面100%视高 */
-  fullPage?: boolean;
-  /** 不作为菜单 */
-  isNotMenu?: boolean;
-  /** 菜单和面包屑对应的图标 */
-  icon?: string;
-  /** 导入的路由模块排序，可用于菜单的排序 */
-  order?: number;
-}
-
-/** 路由配置 */
-export type CustomRoute = RouteRecordRaw & { meta: CustomRouteMeta };
-
 /** 导入的路由模块 */
-export type ImportedRouteModules = Record<string, { default: CustomRoute; [key: string]: any }>;
+export type ImportedRouteModules = Record<string, { default: RouteRecordRaw; [key: string]: any }>;
 
 /** 路由声明的key */
 export type RouteKey =

src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue

@@ -61,7 +61,7 @@ function generateBreadcrumb() {
 function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) {
   const list: Breadcrumb[] = [];
   routeMatched.forEach(item => {
-    if (!item.meta?.isNotMenu) {
+    if (!item.meta?.notAsMenu) {
       const routeName = item.name as RouteKey;
       const breadcrumItem: Breadcrumb = {
         key: routeName,

src/layouts/common/MixSider/index.vue

@@ -69,7 +69,7 @@ const activeParentRouteName = ref(getActiveRouteName());
 
 function getActiveRouteName() {
   let name = '';
-  const menuMatched = route.matched.filter(item => !item.meta.isNotMenu);
+  const menuMatched = route.matched.filter(item => !item.meta?.notAsMenu);
   if (menuMatched.length) {
     name = menuMatched[0].name as string;
   }

src/layouts/common/VerticalMixSider/index.vue

@@ -69,7 +69,7 @@ const activeParentRouteName = ref(getActiveRouteName());
 
 function getActiveRouteName() {
   let name = '';
-  const menuMatched = route.matched.filter(item => !item.meta.isNotMenu);
+  const menuMatched = route.matched.filter(item => !item.meta?.notAsMenu);
   if (menuMatched.length) {
     name = menuMatched[0].name as string;
   }

src/layouts/index.ts

@@ -1,5 +1,4 @@
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
-import RouterViewLayout from './RouterViewLayout/index.vue';
 
-export { BasicLayout, BlankLayout, RouterViewLayout };
+export { BasicLayout, BlankLayout };

src/router/modules/about.ts

@@ -1,24 +1,26 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BasicLayout } from '@/layouts';
 import About from '@/views/about/index.vue';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('about');
 
-const ABOUT: CustomRoute = setSingleRoute({
+const ABOUT: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
     component: About,
     meta: {
-      requiresAuth: true,
       title,
+      requiresAuth: true,
+      keepAlive: true,
       icon: 'fluent:book-information-24-regular'
     }
   },
   container: BasicLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 7
   },
   notFoundName: routeName('not-found')

src/router/modules/component.ts

@@ -1,13 +1,13 @@
-import type { CustomRoute } from '@/interface';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
 import ComponentMap from '@/views/component/map/index.vue';
 import ComponentVideo from '@/views/component/video/index.vue';
 import EditorQuill from '@/views/component/editor/quill/index.vue';
 import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
 import ComponentSwiper from '@/views/component/swiper/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const COMPONENT: CustomRoute = {
+const COMPONENT: RouteRecordRaw = {
   name: routeName('component'),
   path: routePath('component'),
   component: BasicLayout,
@@ -42,12 +42,9 @@ const COMPONENT: CustomRoute = {
     {
       name: routeName('component_editor'),
       path: routePath('component_editor'),
-      component: RouterViewLayout,
       redirect: { name: routeName('component_editor_quill') },
       meta: {
-        requiresAuth: true,
-        title: routeTitle('component_editor'),
-        fullPage: true
+        title: routeTitle('component_editor')
       },
       children: [
         {

src/router/modules/dashboard.ts

@@ -1,10 +1,10 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
 import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DASHBOARD: CustomRoute = {
+const DASHBOARD: RouteRecordRaw = {
   name: routeName('dashboard'),
   path: routePath('dashboard'),
   component: BasicLayout,

src/router/modules/document.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 import DocumentVue from '@/views/document/vue/index.vue';
 import DocumentVite from '@/views/document/vite/index.vue';
 import DocumentNaive from '@/views/document/naive/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DOCUMENT: CustomRoute = {
+const DOCUMENT: RouteRecordRaw = {
   name: routeName('document'),
   path: routePath('document'),
   component: BasicLayout,

src/router/modules/exception.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 import Exception403 from '@/views/system/exception/403.vue';
 import Exception404 from '@/views/system/exception/404.vue';
 import Exception500 from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const EXCEPTION: CustomRoute = {
+const EXCEPTION: RouteRecordRaw = {
   name: routeName('exception'),
   path: routePath('exception'),
   component: BasicLayout,

src/router/modules/feat.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 import FeatCopy from '@/views/feat/copy/index.vue';
 import FeatIcon from '@/views/feat/icon/index.vue';
 import FeatPrint from '@/views/feat/print/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const FEAT: CustomRoute = {
+const FEAT: RouteRecordRaw = {
   name: routeName('feat'),
   path: routePath('feat'),
   component: BasicLayout,

src/router/modules/multi-menu.ts

@@ -1,9 +1,9 @@
-import type { CustomRoute } from '@/interface';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
 import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const MULTI_MENU: CustomRoute = {
+const MULTI_MENU: RouteRecordRaw = {
   name: routeName('multi-menu'),
   path: routePath('multi-menu'),
   component: BasicLayout,
@@ -17,22 +17,19 @@ const MULTI_MENU: CustomRoute = {
     {
       name: routeName('multi-menu_first'),
       path: routePath('multi-menu_first'),
-      component: RouterViewLayout,
       redirect: { name: routeName('multi-menu_first_second') },
       meta: {
-        keepAlive: true,
-        requiresAuth: true,
-        title: routeTitle('multi-menu_first_second')
+        title: routeTitle('multi-menu_first')
       },
       children: [
         {
           name: routeName('multi-menu_first_second'),
           path: routePath('multi-menu_first_second'),
           component: MultiMenuFirstSecond,
           meta: {
-            keepAlive: true,
-            requiresAuth: true,
             title: routeTitle('multi-menu_first_second'),
+            requiresAuth: true,
+            keepAlive: true,
             fullPage: true
           }
         }

src/router/modules/website.ts

@@ -1,24 +1,25 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BlankLayout } from '@/layouts';
 import Website from '@/views/website/index.vue';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('website');
 
-const WEBSITE: CustomRoute = setSingleRoute({
+const WEBSITE: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
     component: Website,
     meta: {
       title,
       icon: 'codicon:remote-explorer',
-      isNotMenu: true
+      notAsMenu: true
     }
   },
   container: BlankLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 8
   },
   notFoundName: routeName('not-found')

src/router/routes/constant-routes.ts

@@ -19,12 +19,13 @@ const constantRoutes: RouteRecordRaw[] = [
     redirect: { name: ROUTE_HOME_NAME }
   },
   {
-    // 名称、路由随意，不在路由声明里面，只是为各个页面充当传递BlankLayout的桥梁，因此访问该路由时重定向到404
+    // 名称、路径随意，不在路由声明里面，只是为各个子路由充当应用BlankLayout布局的桥梁，因此访问该路由时重定向到404
     name: 'constant-single_',
     path: '/constant-single_',
     component: BlankLayout,
     redirect: { name: routeName('not-found') },
     meta: {
+      title: 'constant-single_',
       keepAlive: true
     },
     children: [

src/router/routes/index.ts

@@ -1,8 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { transformMultiDegreeRoutes } from '@/utils';
 import customRoutes from '../modules';
 import constantRoutes from './constant-routes';
 
+const transformRoutes = transformMultiDegreeRoutes(customRoutes);
+
 /** 所有路由 */
-export const routes: RouteRecordRaw[] = [...customRoutes, ...constantRoutes];
+export const routes: RouteRecordRaw[] = [...transformRoutes, ...constantRoutes];
 
 export { ROUTE_HOME } from './route-home';

src/typings/router.d.ts

@@ -0,0 +1,22 @@
+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    /** 路由名称(作为菜单时为菜单的名称) */
+    title: string;
+    /** 需要登录权限 */
+    requiresAuth?: boolean;
+    /** 缓存页面 */
+    keepAlive?: boolean;
+    /** 页面占满剩余高度(去除头部、tab和底部后的高度) */
+    fullPage?: boolean;
+    /** 不作为菜单 */
+    notAsMenu?: boolean;
+    /** 菜单和面包屑对应的图标 */
+    icon?: string;
+    /** 导入的路由模块排序，可用于菜单的排序 */
+    order?: number;
+    /** y方向滚动的距离(被缓存的页面保留滚动行为) */
+    scrollY?: number;
+  }
+}

src/utils/router/cache.ts

@@ -1,6 +1,13 @@
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 
+/** 给需要缓存的页面组件设置名称 */
+function setComponentName(component?: Component, name?: string) {
+  if (component && name) {
+    Object.assign(component, { name });
+  }
+}
+
 function getCacheName(route: RouteRecordRaw, isCache: boolean) {
   const cacheNames: string[] = [];
   const hasChild = hasChildren(route);
@@ -26,13 +33,6 @@ function hasChildren(route: RouteRecordRaw) {
   return Boolean(route.children && route.children.length);
 }
 
-/** 给需要缓存的页面组件设置名称 */
-export function setComponentName(component?: Component, name?: string) {
-  if (component && name) {
-    Object.assign(component, { name });
-  }
-}
-
 /** 获取被缓存的路由 */
 export function getCacheRoutes(routes: RouteRecordRaw[]) {
   const cacheNames: string[] = [];