refactor(projects): use new elegant-router plugin

src/components/common/exception-base.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useRouterPush } from '@/hooks/common/router';
+import { useRouter } from 'vue-router';
 import { $t } from '@/locales';
 
 defineOptions({ name: 'ExceptionBase' });
@@ -20,7 +20,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { routerPushByKey } = useRouterPush();
+const router = useRouter();
 
 const iconMap: Record<ExceptionType, string> = {
   '403': 'no-permission',
@@ -36,7 +36,7 @@ const icon = computed(() => iconMap[props.type]);
     <div class="flex text-400px text-primary">
       <SvgIcon :local-icon="icon" />
     </div>
-    <NButton type="primary" @click="routerPushByKey('root')">{{ $t('common.backToHome') }}</NButton>
+    <NButton type="primary" @click="router.push('/')">{{ $t('common.backToHome') }}</NButton>
   </div>
 </template>
 

src/router/_generated/routes.ts

@@ -7,23 +7,6 @@
 import type { AutoRouterRoute } from '@elegant-router/types';
 
 export const routes: AutoRouterRoute[] = [
-  {
-    name: 'Root',
-    path: '/',
-    redirect: '/home',
-    meta: {
-      title: "Root"
-    },
-  },
-  {
-    name: 'NotFound',
-    path: '/:pathMatch(.*)*',
-    layout: 'base',
-    component: '404',
-    meta: {
-      title: "NotFound"
-    },
-  },
   {
     name: '403',
     path: '/403',

src/router/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
 import type { RouterHistory } from 'vue-router';
+import { createBuiltinVueRoutes } from './routes/builtin';
 import { createRouterGuard } from './guard';
 
 const { VITE_ROUTER_HISTORY_MODE = 'history', VITE_BASE_URL } = import.meta.env;
@@ -13,12 +14,12 @@ const historyCreatorMap: Record<Env.RouterHistoryMode, (base?: string) => Router
 
 export const router = createRouter({
   history: historyCreatorMap[VITE_ROUTER_HISTORY_MODE](VITE_BASE_URL),
-  routes: []
+  routes: createBuiltinVueRoutes()
 });
 
 /** Setup Vue Router */
 export async function setupRouter(app: App) {
   app.use(router);
-  createRouterGuard(router);
+  // createRouterGuard(router);
   await router.isReady();
 }

src/router/routes/builtin.ts

@@ -0,0 +1,39 @@
+import type { AutoRouterRedirect, AutoRouterRoute, AutoRouterSingleView } from '@elegant-router/types';
+import { layouts, views } from '../_generated/imports';
+import { transformToVueRoutes } from '../_generated/transformer';
+import { routes } from '../_generated/routes';
+
+/**
+ * 根路由
+ */
+export const ROOT_ROUTE: AutoRouterRedirect = {
+  name: 'Root',
+  path: '/',
+  redirect: import.meta.env.VITE_ROUTE_HOME_PATH || '/home',
+  meta: {
+    title: 'Root',
+    constant: true
+  }
+};
+
+/**
+ * 404 路由
+ */
+export const NOT_FOUND_ROUTE: AutoRouterSingleView = {
+  name: 'NotFound',
+  path: '/:pathMatch(.*)*',
+  component: '404',
+  layout: 'blank',
+  meta: {
+    title: 'NotFound',
+    constant: true
+  }
+};
+
+/** 内置路由，必须是常量路由，且必须在 vue-router 中设置 */
+const builtinRoutes: AutoRouterRoute[] = [ROOT_ROUTE, NOT_FOUND_ROUTE, ...routes];
+
+/** 创建内置 vue 路由 */
+export function createBuiltinVueRoutes() {
+  return transformToVueRoutes(builtinRoutes, layouts, views);
+}

src/router/routes/index.ts

@@ -1,38 +1,31 @@
-import type { AutoRouterRedirect, AutoRouterRoute } from '@elegant-router/types';
+import type { AutoRouterRoute } from '@elegant-router/types';
 import { routes } from '../_generated/routes';
 import { layouts, views } from '../_generated/imports';
 import { transformToVueRoutes } from '../_generated/transformer';
 
-/** create routes when the auth route mode is static */
+/** 创建静态路由 */
 export function createStaticRoutes() {
   const constantRoutes: AutoRouterRoute[] = [];
   const authRoutes: AutoRouterRoute[] = [];
 
-  let rootRoute: AutoRouterRedirect | undefined;
-
   routes.forEach(item => {
     if (item.meta?.constant) {
       constantRoutes.push(item);
     } else {
       authRoutes.push(item);
     }
-
-    if (item.name === 'Root') {
-      rootRoute = item as AutoRouterRedirect;
-    }
   });
 
   return {
     constantRoutes,
-    authRoutes,
-    rootRoute: rootRoute as AutoRouterRedirect
+    authRoutes
   };
 }
 
 /**
- * Get auth vue routes
+ * 获取认证路由
  *
- * @param authRoutes Elegant routes
+ * @param authRoutes 认证路由
  */
 export function getAuthVueRoutes(authRoutes: AutoRouterRoute[]) {
   return transformToVueRoutes(authRoutes, layouts, views);