refactor(@vben/access): 重构路由的重定向逻辑

@vben-core/shared
@vben/playground
@vben/backend-mock
@vben/web-antd
@vben/web-antdv-next
@vben/web-ele
@vben/naive
@vben/tdesign

apps/backend-mock/utils/mock-data.ts

@@ -64,11 +64,11 @@ const dashboardMenus = [
     },
     name: 'Dashboard',
     path: '/dashboard',
-    redirect: '/analytics',
+    redirect: '/dashboard/analytics',
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: '/dashboard/analytics/index',
         meta: {
           affixTab: true,
@@ -77,7 +77,7 @@ const dashboardMenus = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: '/dashboard/workspace/index',
         meta: {
           title: 'page.dashboard.workspace',
@@ -96,7 +96,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
         title: 'demos.access.adminVisible',
       },
       name: 'AccessAdminVisibleDemo',
-      path: '/demos/access/admin-visible',
+      path: 'admin-visible',
     },
     super: {
       component: '/demos/access/super-visible',
@@ -105,7 +105,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
         title: 'demos.access.superVisible',
       },
       name: 'AccessSuperVisibleDemo',
-      path: '/demos/access/super-visible',
+      path: 'super-visible',
     },
     user: {
       component: '/demos/access/user-visible',
@@ -114,7 +114,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
         title: 'demos.access.userVisible',
       },
       name: 'AccessUserVisibleDemo',
-      path: '/demos/access/user-visible',
+      path: 'user-visible',
     },
   };
 
@@ -132,7 +132,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
       children: [
         {
           name: 'AccessDemos',
-          path: '/demosaccess',
+          path: 'access',
           meta: {
             icon: 'mdi:cloud-key-outline',
             title: 'demos.access.backendPermissions',
@@ -141,7 +141,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
           children: [
             {
               name: 'AccessPageControlDemo',
-              path: '/demos/access/page-control',
+              path: 'page-control',
               component: '/demos/access/index',
               meta: {
                 icon: 'mdi:page-previous-outline',
@@ -150,7 +150,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
             },
             {
               name: 'AccessButtonControlDemo',
-              path: '/demos/access/button-control',
+              path: 'button-control',
               component: '/demos/access/button-control',
               meta: {
                 icon: 'mdi:button-cursor',
@@ -159,7 +159,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
             },
             {
               name: 'AccessMenuVisible403Demo',
-              path: '/demos/access/menu-visible-403',
+              path: 'menu-visible-403',
               component: '/demos/access/menu-visible-403',
               meta: {
                 authority: ['no-body'],

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-antd/src/router/routes/modules/demos.ts

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.antd'),
         },
         name: 'AntDesignDemos',
-        path: '/demos/ant-design',
+        path: 'ant-design',
         component: () => import('#/views/demos/antd/index.vue'),
       },
     ],

apps/web-antd/src/router/routes/modules/vben.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -37,7 +37,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -47,7 +47,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdVNext',
-        path: '/vben-admin/antdv-next',
+        path: 'antdv-next',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -58,7 +58,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -69,7 +69,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenTDesign',
-        path: '/vben-admin/tdesign',
+        path: 'tdesign',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -80,7 +80,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',

apps/web-antdv-next/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-antdv-next/src/router/routes/modules/demos.ts

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.antd'),
         },
         name: 'AntDesignDemos',
-        path: '/demos/ant-design-next',
+        path: 'ant-design-next',
         component: () => import('#/views/demos/antd/index.vue'),
       },
     ],

apps/web-antdv-next/src/router/routes/modules/vben.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -37,7 +37,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -47,7 +47,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntd',
-        path: '/vben-admin/antd',
+        path: 'antd',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -58,7 +58,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -69,7 +69,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenTDesign',
-        path: '/vben-admin/tdesign',
+        path: 'tdesign',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -80,7 +80,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',

apps/web-ele/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-ele/src/router/routes/modules/demos.ts

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.elementPlus'),
         },
         name: 'NaiveDemos',
-        path: '/demos/element',
+        path: 'element',
         component: () => import('#/views/demos/element/index.vue'),
       },
       {
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.form'),
         },
         name: 'BasicForm',
-        path: '/demos/form',
+        path: 'form',
         component: () => import('#/views/demos/form/basic.vue'),
       },
     ],

apps/web-ele/src/router/routes/modules/vben.ts

@@ -31,7 +31,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -41,7 +41,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -51,7 +51,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -62,7 +62,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntd',
-        path: '/vben-admin/antd',
+        path: 'antd',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -73,7 +73,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdVNext',
-        path: '/vben-admin/antdv-next',
+        path: 'antdv-next',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -84,7 +84,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenTDesign',
-        path: '/vben-admin/tdesign',
+        path: 'tdesign',
         component: IFrameView,
         meta: {
           badgeType: 'dot',

apps/web-naive/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-naive/src/router/routes/modules/demos.ts

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.naive'),
         },
         name: 'NaiveDemos',
-        path: '/demos/naive',
+        path: 'naive',
         component: () => import('#/views/demos/naive/index.vue'),
       },
       {
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.table'),
         },
         name: 'Table',
-        path: '/demos/table',
+        path: 'table',
         component: () => import('#/views/demos/table/index.vue'),
       },
       {
@@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.form'),
         },
         name: 'Form',
-        path: '/demos/form',
+        path: 'form',
         component: () => import('#/views/demos/form/basic.vue'),
       },
       {
@@ -42,7 +42,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.arrayForm'),
         },
         name: 'ArrayForm',
-        path: '/demos/array-form',
+        path: 'array-form',
         component: () => import('#/views/demos/naive/array-form/index.vue'),
       },
     ],

apps/web-naive/src/router/routes/modules/vben.ts

@@ -31,7 +31,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -41,7 +41,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -51,7 +51,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntd',
-        path: '/vben-admin/antd',
+        path: 'antd',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -62,7 +62,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdVNext',
-        path: '/vben-admin/antdv-next',
+        path: 'antdv-next',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -73,7 +73,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenTDesign',
-        path: '/vben-admin/tdesign',
+        path: 'tdesign',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -84,7 +84,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',

apps/web-tdesign/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-tdesign/src/router/routes/modules/demos.ts

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.tdesign'),
         },
         name: 'TDesignDemos',
-        path: '/demos/tdesign',
+        path: 'tdesign',
         component: () => import('#/views/demos/tdesign/index.vue'),
       },
     ],

apps/web-tdesign/src/router/routes/modules/vben.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -37,7 +37,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -47,7 +47,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -58,7 +58,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdv',
-        path: '/vben-admin/antdv',
+        path: 'antdv',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -69,7 +69,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdVNext',
-        path: '/vben-admin/antdv-next',
+        path: 'antdv-next',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -80,7 +80,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',

packages/@core/base/shared/src/utils/tree.ts

@@ -79,16 +79,22 @@ function filterTree<T extends Record<string, any>>(
  */
 function mapTree<T, V extends Record<string, any>>(
   tree: T[],
-  mapper: (node: T) => V,
+  mapper: (node: T, parent: null | V) => V,
   options?: TreeConfigOptions,
+  parent: null | V = null,
 ): V[] {
   const { childProps } = options || {
     childProps: 'children',
   };
   return tree.map((node) => {
-    const mapperNode: Record<string, any> = mapper(node);
+    const mapperNode: Record<string, any> = mapper(node, parent as null | V);
     if (mapperNode[childProps]) {
-      mapperNode[childProps] = mapTree(mapperNode[childProps], mapper, options);
+      mapperNode[childProps] = mapTree(
+        mapperNode[childProps],
+        mapper,
+        options,
+        mapperNode as V,
+      );
     }
     return mapperNode as V;
   });

packages/effects/access/src/accessible.ts

@@ -115,7 +115,7 @@ async function generateRoutes(
    * 1. 对未添加redirect的路由添加redirect
    * 2. 将懒加载的组件名称修改为当前路由的名称（如果启用了keep-alive的话）
    */
-  resultRoutes = mapTree(resultRoutes, (route) => {
+  resultRoutes = mapTree(resultRoutes, (route, parent) => {
     // 重新包装component，使用与路由名称相同的name以支持keep-alive的条件缓存。
     if (
       route.meta?.keepAlive &&
@@ -144,12 +144,19 @@ async function generateRoutes(
     }
     const firstChild = route.children[0];
 
-    // 如果子路由不是以/开头，则直接返回,这种情况需要计算全部父级的path才能得出正确的path，这里不做处理
-    if (!firstChild?.path || !firstChild.path.startsWith('/')) {
+    if (!firstChild?.path || firstChild.path.startsWith('/')) {
       return route;
     }
 
-    route.redirect = firstChild.path;
+    if (parent && parent.redirect) {
+      const parentSplit = (parent.redirect as string).split('/');
+      parentSplit.splice(-1, 2, route.path, firstChild.path);
+      const redirectPath = parentSplit.join('/');
+      route.redirect = redirectPath;
+    } else {
+      route.redirect = `${route.path}/${firstChild.path}`;
+    }
+
     return route;
   });
 

playground/src/router/routes/modules/dashboard.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -25,7 +25,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

playground/src/router/routes/modules/demos.ts

@@ -21,11 +21,11 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.access.frontendPermissions'),
         },
         name: 'AccessDemos',
-        path: '/demos/access',
+        path: 'access',
         children: [
           {
             name: 'AccessPageControlDemo',
-            path: '/demos/access/page-control',
+            path: 'page-control',
             component: () => import('#/views/demos/access/index.vue'),
             meta: {
               icon: 'mdi:page-previous-outline',
@@ -35,7 +35,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'AccessButtonControlDemo',
-            path: '/demos/access/button-control',
+            path: 'button-control',
             component: () => import('#/views/demos/access/button-control.vue'),
             meta: {
               icon: 'mdi:button-cursor',
@@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'AccessMenuVisible403Demo',
-            path: '/demos/access/menu-visible-403',
+            path: 'menu-visible-403',
             component: () =>
               import('#/views/demos/access/menu-visible-403.vue'),
             meta: {
@@ -56,7 +56,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'AccessSuperVisibleDemo',
-            path: '/demos/access/super-visible',
+            path: 'super-visible',
             component: () => import('#/views/demos/access/super-visible.vue'),
             meta: {
               authority: ['super'],
@@ -66,7 +66,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'AccessAdminVisibleDemo',
-            path: '/demos/access/admin-visible',
+            path: 'admin-visible',
             component: () => import('#/views/demos/access/admin-visible.vue'),
             meta: {
               authority: ['admin'],
@@ -76,7 +76,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'AccessUserVisibleDemo',
-            path: '/demos/access/user-visible',
+            path: 'user-visible',
             component: () => import('#/views/demos/access/user-visible.vue'),
             meta: {
               authority: ['user'],
@@ -93,11 +93,11 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.features.title'),
         },
         name: 'FeaturesDemos',
-        path: '/demos/features',
+        path: 'features',
         children: [
           {
             name: 'LoginExpiredDemo',
-            path: '/demos/features/login-expired',
+            path: 'login-expired',
             component: () =>
               import('#/views/demos/features/login-expired/index.vue'),
             meta: {
@@ -107,7 +107,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'IconsDemo',
-            path: '/demos/features/icons',
+            path: 'icons',
             component: () => import('#/views/demos/features/icons/index.vue'),
             meta: {
               icon: 'lucide:annoyed',
@@ -116,7 +116,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'WatermarkDemo',
-            path: '/demos/features/watermark',
+            path: 'watermark',
             component: () =>
               import('#/views/demos/features/watermark/index.vue'),
             meta: {
@@ -126,7 +126,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'PreferencesExtensionDemo',
-            path: '/demos/features/preferences-extension',
+            path: 'preferences-extension',
             component: () =>
               import('#/views/demos/features/preferences-extension/index.vue'),
             meta: {
@@ -136,7 +136,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FeatureTabsDemo',
-            path: '/demos/features/tabs',
+            path: 'tabs',
             component: () => import('#/views/demos/features/tabs/index.vue'),
             meta: {
               icon: 'lucide:app-window',
@@ -145,7 +145,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FeatureTabDetailDemo',
-            path: '/demos/features/tabs/detail/:id',
+            path: 'detail/:id',
             component: () =>
               import('#/views/demos/features/tabs/tab-detail.vue'),
             meta: {
@@ -157,7 +157,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'HideChildrenInMenuParentDemo',
-            path: '/demos/features/hide-menu-children',
+            path: 'hide-menu-children',
             meta: {
               hideChildrenInMenu: true,
               icon: 'ic:round-menu',
@@ -176,7 +176,7 @@ const routes: RouteRecordRaw[] = [
               },
               {
                 name: 'HideChildrenInMenuChildrenDemo',
-                path: '/demos/features/hide-menu-children/children',
+                path: 'children',
                 component: () =>
                   import('#/views/demos/features/hide-menu-children/children.vue'),
                 meta: {
@@ -188,7 +188,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FullScreenDemo',
-            path: '/demos/features/full-screen',
+            path: 'full-screen',
             component: () =>
               import('#/views/demos/features/full-screen/index.vue'),
             meta: {
@@ -198,7 +198,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FileDownloadDemo',
-            path: '/demos/features/file-download',
+            path: 'file-download',
             component: () =>
               import('#/views/demos/features/file-download/index.vue'),
             meta: {
@@ -208,7 +208,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'ClipboardDemo',
-            path: '/demos/features/clipboard',
+            path: 'clipboard',
             component: () =>
               import('#/views/demos/features/clipboard/index.vue'),
             meta: {
@@ -218,7 +218,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'MenuQueryDemo',
-            path: '/demos/menu-query',
+            path: 'menu-query',
             component: () =>
               import('#/views/demos/features/menu-query/index.vue'),
             meta: {
@@ -231,7 +231,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'NewWindowDemo',
-            path: '/demos/new-window',
+            path: 'new-window',
             component: () =>
               import('#/views/demos/features/new-window/index.vue'),
             meta: {
@@ -242,7 +242,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VueQueryDemo',
-            path: '/demos/features/vue-query',
+            path: 'vue-query',
             component: () =>
               import('#/views/demos/features/vue-query/index.vue'),
             meta: {
@@ -252,7 +252,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'RequestParamsSerializerDemo',
-            path: '/demos/features/request-params-serializer',
+            path: 'request-params-serializer',
             component: () =>
               import('#/views/demos/features/request-params-serializer/index.vue'),
             meta: {
@@ -262,7 +262,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'BigIntDemo',
-            path: '/demos/features/json-bigint',
+            path: 'json-bigint',
             component: () =>
               import('#/views/demos/features/json-bigint/index.vue'),
             meta: {
@@ -275,7 +275,7 @@ const routes: RouteRecordRaw[] = [
       // 面包屑导航
       {
         name: 'BreadcrumbDemos',
-        path: '/demos/breadcrumb',
+        path: 'breadcrumb',
         meta: {
           icon: 'lucide:navigation',
           title: $t('demos.breadcrumb.navigation'),
@@ -283,7 +283,7 @@ const routes: RouteRecordRaw[] = [
         children: [
           {
             name: 'BreadcrumbLateralDemo',
-            path: '/demos/breadcrumb/lateral',
+            path: 'lateral',
             component: () => import('#/views/demos/breadcrumb/lateral.vue'),
             meta: {
               icon: 'lucide:navigation',
@@ -292,7 +292,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'BreadcrumbLateralDetailDemo',
-            path: '/demos/breadcrumb/lateral-detail',
+            path: 'lateral-detail',
             component: () =>
               import('#/views/demos/breadcrumb/lateral-detail.vue'),
             meta: {
@@ -303,7 +303,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'BreadcrumbLevelDemo',
-            path: '/demos/breadcrumb/level',
+            path: 'level',
             meta: {
               icon: 'lucide:navigation',
               title: $t('demos.breadcrumb.level'),
@@ -311,7 +311,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'BreadcrumbLevelDetailDemo',
-                path: '/demos/breadcrumb/level/detail',
+                path: 'detail',
                 component: () =>
                   import('#/views/demos/breadcrumb/level-detail.vue'),
                 meta: {
@@ -329,11 +329,11 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.fallback.title'),
         },
         name: 'FallbackDemos',
-        path: '/demos/fallback',
+        path: 'fallback',
         children: [
           {
             name: 'Fallback403Demo',
-            path: '/demos/fallback/403',
+            path: '403',
             component: () => import('#/views/_core/fallback/forbidden.vue'),
             meta: {
               icon: 'mdi:do-not-disturb-alt',
@@ -342,7 +342,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'Fallback404Demo',
-            path: '/demos/fallback/404',
+            path: '404',
             component: () => import('#/views/_core/fallback/not-found.vue'),
             meta: {
               icon: 'mdi:table-off',
@@ -351,7 +351,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'Fallback500Demo',
-            path: '/demos/fallback/500',
+            path: '500',
             component: () =>
               import('#/views/_core/fallback/internal-error.vue'),
             meta: {
@@ -361,7 +361,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FallbackOfflineDemo',
-            path: '/demos/fallback/offline',
+            path: 'offline',
             component: () => import('#/views/_core/fallback/offline.vue'),
             meta: {
               icon: 'mdi:offline',
@@ -379,12 +379,12 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.badge.title'),
         },
         name: 'BadgeDemos',
-        path: '/demos/badge',
+        path: 'badge',
         children: [
           {
             name: 'BadgeDotDemo',
             component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/dot',
+            path: 'dot',
             meta: {
               badgeType: 'dot',
               icon: 'lucide:square-dot',
@@ -394,7 +394,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'BadgeTextDemo',
             component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/text',
+            path: 'text',
             meta: {
               badge: '10',
               icon: 'lucide:square-dot',
@@ -404,7 +404,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'BadgeColorDemo',
             component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/color',
+            path: 'color',
             meta: {
               badge: 'Hot',
               badgeVariants: 'destructive',
@@ -422,12 +422,12 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.activeIcon.title'),
         },
         name: 'ActiveIconDemos',
-        path: '/demos/active-icon',
+        path: 'active-icon',
         children: [
           {
             name: 'ActiveIconDemo',
             component: () => import('#/views/demos/active-icon/index.vue'),
-            path: '/demos/active-icon/children',
+            path: 'children',
             meta: {
               activeIcon: 'fluent-emoji:radioactive',
               icon: 'bi:radioactive',
@@ -443,11 +443,11 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.outside.title'),
         },
         name: 'OutsideDemos',
-        path: '/demos/outside',
+        path: 'outside',
         children: [
           {
             name: 'IframeDemos',
-            path: '/demos/outside/iframe',
+            path: 'iframe',
             meta: {
               icon: 'mdi:newspaper-variant-outline',
               title: $t('demos.outside.embedded'),
@@ -455,7 +455,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'VueDocumentDemo',
-                path: '/demos/outside/iframe/vue-document',
+                path: 'vue-document',
                 component: IFrameView,
                 meta: {
                   icon: 'logos:vue',
@@ -466,7 +466,7 @@ const routes: RouteRecordRaw[] = [
               },
               {
                 name: 'TailwindcssDemo',
-                path: '/demos/outside/iframe/tailwindcss',
+                path: 'tailwindcss',
                 component: IFrameView,
                 meta: {
                   icon: 'devicon:tailwindcss',
@@ -479,7 +479,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'ExternalLinkDemos',
-            path: '/demos/outside/external-link',
+            path: 'external-link',
             meta: {
               icon: 'mdi:newspaper-variant-multiple-outline',
               title: $t('demos.outside.externalLink'),
@@ -487,7 +487,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'ViteDemo',
-                path: '/demos/outside/external-link/vite',
+                path: 'vite',
                 component: IFrameView,
                 meta: {
                   icon: 'logos:vitejs',
@@ -497,7 +497,7 @@ const routes: RouteRecordRaw[] = [
               },
               {
                 name: 'VueUseDemo',
-                path: '/demos/outside/external-link/vue-use',
+                path: 'vue-use',
                 component: IFrameView,
                 meta: {
                   icon: 'logos:vueuse',
@@ -516,11 +516,11 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.nested.title'),
         },
         name: 'NestedDemos',
-        path: '/demos/nested',
+        path: 'nested',
         children: [
           {
             name: 'Menu1Demo',
-            path: '/demos/nested/menu1',
+            path: 'menu1',
             component: () => import('#/views/demos/nested/menu-1.vue'),
             meta: {
               icon: 'ic:round-menu',
@@ -530,7 +530,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'Menu2Demo',
-            path: '/demos/nested/menu2',
+            path: 'menu2',
             meta: {
               icon: 'ic:round-menu',
               keepAlive: true,
@@ -539,7 +539,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'Menu21Demo',
-                path: '/demos/nested/menu2/menu2-1',
+                path: 'menu2-1',
                 component: () => import('#/views/demos/nested/menu-2-1.vue'),
                 meta: {
                   icon: 'ic:round-menu',
@@ -551,7 +551,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'Menu3Demo',
-            path: '/demos/nested/menu3',
+            path: 'menu3',
             meta: {
               icon: 'ic:round-menu',
               title: $t('demos.nested.menu3'),
@@ -559,7 +559,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'Menu31Demo',
-                path: '/demos/nested/menu3/menu3-1',
+                path: 'menu3-1',
                 component: () => import('#/views/demos/nested/menu-3-1.vue'),
                 meta: {
                   icon: 'ic:round-menu',
@@ -569,7 +569,7 @@ const routes: RouteRecordRaw[] = [
               },
               {
                 name: 'Menu32Demo',
-                path: '/demos/nested/menu3/menu3-2',
+                path: 'menu3-2',
                 meta: {
                   icon: 'ic:round-menu',
                   title: $t('demos.nested.menu3_2'),
@@ -577,7 +577,7 @@ const routes: RouteRecordRaw[] = [
                 children: [
                   {
                     name: 'Menu321Demo',
-                    path: '/demos/nested/menu3/menu3-2/menu3-2-1',
+                    path: 'menu3-2-1',
                     component: () =>
                       import('#/views/demos/nested/menu-3-2-1.vue'),
                     meta: {

playground/src/router/routes/modules/examples.ts

@@ -15,7 +15,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'FormExample',
-        path: '/examples/form',
+        path: 'form',
         meta: {
           icon: 'mdi:form-select',
           title: $t('examples.form.title'),
@@ -23,7 +23,7 @@ const routes: RouteRecordRaw[] = [
         children: [
           {
             name: 'FormBasicExample',
-            path: '/examples/form/basic',
+            path: 'basic',
             component: () => import('#/views/examples/form/basic.vue'),
             meta: {
               title: $t('examples.form.basic'),
@@ -31,7 +31,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormQueryExample',
-            path: '/examples/form/query',
+            path: 'query',
             component: () => import('#/views/examples/form/query.vue'),
             meta: {
               title: $t('examples.form.query'),
@@ -39,7 +39,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormValueFormatExample',
-            path: '/examples/form/value-format',
+            path: 'value-format',
             component: () => import('#/views/examples/form/value-format.vue'),
             meta: {
               title: $t('examples.form.valueFormat'),
@@ -47,7 +47,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormRulesExample',
-            path: '/examples/form/rules',
+            path: 'rules',
             component: () => import('#/views/examples/form/rules.vue'),
             meta: {
               title: $t('examples.form.rules'),
@@ -55,7 +55,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormDynamicExample',
-            path: '/examples/form/dynamic',
+            path: 'dynamic',
             component: () => import('#/views/examples/form/dynamic.vue'),
             meta: {
               title: $t('examples.form.dynamic'),
@@ -63,7 +63,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormLayoutExample',
-            path: '/examples/form/custom-layout',
+            path: 'custom-layout',
             component: () => import('#/views/examples/form/custom-layout.vue'),
             meta: {
               title: $t('examples.form.layout'),
@@ -71,7 +71,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormCustomExample',
-            path: '/examples/form/custom',
+            path: 'custom',
             component: () => import('#/views/examples/form/custom.vue'),
             meta: {
               title: $t('examples.form.custom'),
@@ -79,7 +79,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormApiExample',
-            path: '/examples/form/api',
+            path: 'api',
             component: () => import('#/views/examples/form/api.vue'),
             meta: {
               title: $t('examples.form.api'),
@@ -87,7 +87,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormMergeExample',
-            path: '/examples/form/merge',
+            path: 'merge',
             component: () => import('#/views/examples/form/merge.vue'),
             meta: {
               title: $t('examples.form.merge'),
@@ -95,7 +95,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormScrollToErrorExample',
-            path: '/examples/form/scroll-to-error-test',
+            path: 'scroll-to-error-test',
             component: () =>
               import('#/views/examples/form/scroll-to-error-test.vue'),
             meta: {
@@ -104,7 +104,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'FormCollapsibleExample',
-            path: '/examples/form/collapsible-test',
+            path: 'collapsible-test',
             component: () => import('#/views/examples/form/collapsible.vue'),
             meta: {
               title: $t('examples.form.collapsible'),
@@ -114,7 +114,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VxeTableExample',
-        path: '/examples/vxe-table',
+        path: 'vxe-table',
         meta: {
           icon: 'lucide:table',
           title: $t('examples.vxeTable.title'),
@@ -122,7 +122,7 @@ const routes: RouteRecordRaw[] = [
         children: [
           {
             name: 'VxeTableBasicExample',
-            path: '/examples/vxe-table/basic',
+            path: 'basic',
             component: () => import('#/views/examples/vxe-table/basic.vue'),
             meta: {
               title: $t('examples.vxeTable.basic'),
@@ -130,7 +130,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableRemoteExample',
-            path: '/examples/vxe-table/remote',
+            path: 'remote',
             component: () => import('#/views/examples/vxe-table/remote.vue'),
             meta: {
               title: $t('examples.vxeTable.remote'),
@@ -138,7 +138,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableTreeExample',
-            path: '/examples/vxe-table/tree',
+            path: 'tree',
             component: () => import('#/views/examples/vxe-table/tree.vue'),
             meta: {
               title: $t('examples.vxeTable.tree'),
@@ -146,7 +146,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableFixedExample',
-            path: '/examples/vxe-table/fixed',
+            path: 'fixed',
             component: () => import('#/views/examples/vxe-table/fixed.vue'),
             meta: {
               title: $t('examples.vxeTable.fixed'),
@@ -154,7 +154,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableCustomCellExample',
-            path: '/examples/vxe-table/custom-cell',
+            path: 'custom-cell',
             component: () =>
               import('#/views/examples/vxe-table/custom-cell.vue'),
             meta: {
@@ -163,7 +163,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableFormExample',
-            path: '/examples/vxe-table/form',
+            path: 'form',
             component: () => import('#/views/examples/vxe-table/form.vue'),
             meta: {
               title: $t('examples.vxeTable.form'),
@@ -171,7 +171,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableEditCellExample',
-            path: '/examples/vxe-table/edit-cell',
+            path: 'edit-cell',
             component: () => import('#/views/examples/vxe-table/edit-cell.vue'),
             meta: {
               title: $t('examples.vxeTable.editCell'),
@@ -179,7 +179,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableEditRowExample',
-            path: '/examples/vxe-table/edit-row',
+            path: 'edit-row',
             component: () => import('#/views/examples/vxe-table/edit-row.vue'),
             meta: {
               title: $t('examples.vxeTable.editRow'),
@@ -187,7 +187,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableVirtualExample',
-            path: '/examples/vxe-table/virtual',
+            path: 'virtual',
             component: () => import('#/views/examples/vxe-table/virtual.vue'),
             meta: {
               title: $t('examples.vxeTable.virtual'),
@@ -195,7 +195,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'VxeTableViewedExample',
-            path: '/examples/vxe-table/viewed',
+            path: 'viewed',
             component: () => import('#/views/examples/vxe-table/viewed.vue'),
             meta: {
               title: $t('examples.vxeTable.viewed'),
@@ -205,7 +205,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'CaptchaExample',
-        path: '/examples/captcha',
+        path: 'captcha',
         meta: {
           icon: 'logos:recaptcha',
           title: $t('examples.captcha.title'),
@@ -213,7 +213,7 @@ const routes: RouteRecordRaw[] = [
         children: [
           {
             name: 'DragVerifyExample',
-            path: '/examples/captcha/slider',
+            path: 'slider',
             component: () =>
               import('#/views/examples/captcha/slider-captcha.vue'),
             meta: {
@@ -222,7 +222,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'RotateVerifyExample',
-            path: '/examples/captcha/slider-rotate',
+            path: 'slider-rotate',
             component: () =>
               import('#/views/examples/captcha/slider-rotate-captcha.vue'),
             meta: {
@@ -231,7 +231,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'TranslateVerifyExample',
-            path: '/examples/captcha/slider-translate',
+            path: 'slider-translate',
             component: () =>
               import('#/views/examples/captcha/slider-translate-captcha.vue'),
             meta: {
@@ -240,7 +240,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'CaptchaPointSelectionExample',
-            path: '/examples/captcha/point-selection',
+            path: 'point-selection',
             component: () =>
               import('#/views/examples/captcha/point-selection-captcha.vue'),
             meta: {
@@ -251,7 +251,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'ModalExample',
-        path: '/examples/modal',
+        path: 'modal',
         component: () => import('#/views/examples/modal/index.vue'),
         meta: {
           icon: 'system-uicons:window-content',
@@ -261,7 +261,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'DrawerExample',
-        path: '/examples/drawer',
+        path: 'drawer',
         component: () => import('#/views/examples/drawer/index.vue'),
         meta: {
           icon: 'iconoir:drawer',
@@ -271,7 +271,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'EllipsisExample',
-        path: '/examples/ellipsis',
+        path: 'ellipsis',
         component: () => import('#/views/examples/ellipsis/index.vue'),
         meta: {
           icon: 'ion:ellipsis-horizontal',
@@ -280,7 +280,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VueResizeDemo',
-        path: '/demos/resize/basic',
+        path: 'resize/basic',
         component: () => import('#/views/examples/resize/basic.vue'),
         meta: {
           icon: 'material-symbols:resize',
@@ -289,7 +289,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'ColPageDemo',
-        path: '/examples/layout/col-page',
+        path: 'layout/col-page',
         component: () => import('#/views/examples/layout/col-page.vue'),
         meta: {
           badge: 'Alpha',
@@ -300,7 +300,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'TippyDemo',
-        path: '/examples/tippy',
+        path: 'tippy',
         component: () => import('#/views/examples/tippy/index.vue'),
         meta: {
           icon: 'mdi:message-settings-outline',
@@ -309,7 +309,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'JsonViewer',
-        path: '/examples/json-viewer',
+        path: 'json-viewer',
         component: () => import('#/views/examples/json-viewer/index.vue'),
         meta: {
           icon: 'tabler:json',
@@ -318,7 +318,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Motion',
-        path: '/examples/motion',
+        path: 'motion',
         component: () => import('#/views/examples/motion/index.vue'),
         meta: {
           icon: 'mdi:animation-play',
@@ -327,7 +327,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'CountTo',
-        path: '/examples/count-to',
+        path: 'count-to',
         component: () => import('#/views/examples/count-to/index.vue'),
         meta: {
           icon: 'mdi:animation-play',
@@ -336,7 +336,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Loading',
-        path: '/examples/loading',
+        path: 'loading',
         component: () => import('#/views/examples/loading/index.vue'),
         meta: {
           icon: 'mdi:circle-double',
@@ -345,7 +345,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'ButtonGroup',
-        path: '/examples/button-group',
+        path: 'button-group',
         component: () => import('#/views/examples/button-group/index.vue'),
         meta: {
           icon: 'mdi:check-circle',
@@ -354,7 +354,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'ContextMenu',
-        path: '/examples/context-menu',
+        path: 'context-menu',
         component: () => import('#/views/examples/context-menu/index.vue'),
         meta: {
           icon: 'mdi:menu',
@@ -363,7 +363,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'CropperDemo',
-        path: '/examples/cropper',
+        path: 'cropper',
         component: () => import('#/views/examples/cropper/index.vue'),
         meta: {
           icon: 'mdi:crop',
@@ -372,7 +372,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'TiptapExample',
-        path: '/examples/tiptap',
+        path: 'tiptap',
         component: () => import('#/views/examples/tiptap/index.vue'),
         meta: {
           icon: 'lucide:square-pen',

playground/src/router/routes/modules/system.ts

@@ -13,7 +13,7 @@ const routes: RouteRecordRaw[] = [
     path: '/system',
     children: [
       {
-        path: '/system/user',
+        path: 'user',
         name: 'SystemUser',
         meta: {
           icon: 'mdi:user',
@@ -22,7 +22,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/system/user/list.vue'),
       },
       {
-        path: '/system/role',
+        path: 'role',
         name: 'SystemRole',
         meta: {
           icon: 'mdi:account-group',
@@ -31,7 +31,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/system/role/list.vue'),
       },
       {
-        path: '/system/menu',
+        path: 'menu',
         name: 'SystemMenu',
         meta: {
           icon: 'mdi:menu',
@@ -40,7 +40,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/system/menu/list.vue'),
       },
       {
-        path: '/system/dept',
+        path: 'dept',
         name: 'SystemDept',
         meta: {
           icon: 'charm:organisation',

playground/src/router/routes/modules/vben.ts

@@ -32,7 +32,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -42,7 +42,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -52,7 +52,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdv',
-        path: '/vben-admin/antdv',
+        path: 'antdv',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -63,7 +63,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenAntdVNext',
-        path: '/vben-admin/antdv-next',
+        path: 'antdv-next',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -75,7 +75,7 @@ const routes: RouteRecordRaw[] = [
 
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -86,7 +86,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -97,7 +97,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenTDesign',
-        path: '/vben-admin/tdesign',
+        path: 'tdesign',
         component: IFrameView,
         meta: {
           badgeType: 'dot',