对未设置 redirect 的父路由，访问时将自动重定向到允许访问的子路由

Author: hooray

package.json

@@ -73,7 +73,7 @@
     "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "4.3.0",
+    "@antfu/eslint-config": "^4.12.0",
     "@faker-js/faker": "^9.7.0",
     "@iconify/json": "^2.2.333",
     "@iconify/vue": "^4.3.0",

pnpm-lock.yaml

@@ -10,7 +10,7 @@ import { useFocus } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 
 defineOptions({
-  name: 'Search',
+  name: 'NavSearchModal',
 })
 
 const isShow = defineModel<boolean>({

src/layouts/components/Topbar/Toolbar/NavSearch/search.vue

@@ -18,7 +18,6 @@ export default defineFakeRoute([
               {
                 path: '/multilevel_menu_example',
                 component: 'Layout',
-                redirect: '/multilevel_menu_example/page',
                 name: 'multilevelMenuExample',
                 meta: {
                   title: '多级导航',
@@ -36,7 +35,6 @@ export default defineFakeRoute([
                   {
                     path: 'level2',
                     name: 'multilevelMenuExample2',
-                    redirect: '/multilevel_menu_example/level2/page',
                     meta: {
                       title: '导航2',
                     },
@@ -52,7 +50,6 @@ export default defineFakeRoute([
                       {
                         path: 'level3',
                         name: 'multilevelMenuExample2-2',
-                        redirect: '/multilevel_menu_example/level2/level3/page1',
                         meta: {
                           title: '导航2-2',
                         },
@@ -82,7 +79,6 @@ export default defineFakeRoute([
               {
                 path: '/permission_example',
                 component: 'Layout',
-                redirect: '/permission_example/index',
                 name: 'permissionExample',
                 meta: {
                   title: '权限验证',

src/mock/app.ts

@@ -112,6 +112,26 @@ function setupRoutes(router: Router) {
   })
 }
 
+// 当父级路由未配置重定向时，自动重定向到有访问权限的子路由
+function setupRedirectAuthChildendRoute(router: Router) {
+  router.beforeEach((to, _from, next) => {
+    const { auth } = useAuth()
+    const currentRoute = router.getRoutes().find(route => route.path === (to.matched.at(-1)?.path ?? ''))
+    if (!currentRoute?.redirect) {
+      const findAuthRoute = currentRoute?.children?.find(route => route.meta?.menu !== false && auth(route.meta?.auth ?? ''))
+      if (findAuthRoute) {
+        next(findAuthRoute)
+      }
+      else {
+        next()
+      }
+    }
+    else {
+      next()
+    }
+  })
+}
+
 // 进度条
 function setupProgress(router: Router) {
   const { isLoading } = useNProgress()
@@ -208,6 +228,7 @@ function setupOther(router: Router) {
 
 export default function setupGuards(router: Router) {
   setupRoutes(router)
+  setupRedirectAuthChildendRoute(router)
   setupProgress(router)
   setupTitle(router)
   setupKeepAlive(router)

src/router/guards.ts

@@ -7,7 +7,6 @@ function Layout() {
 const routes: RouteRecordRaw = {
   path: '/breadcrumb_example',
   component: Layout,
-  redirect: '/breadcrumb_example/list1',
   name: 'breadcrumbExample',
   meta: {
     title: '面包屑导航',
@@ -34,7 +33,6 @@ const routes: RouteRecordRaw = {
     },
     {
       path: 'list2',
-      redirect: '/breadcrumb_example/list2',
       meta: {
         title: '列表2（层级模式）',
       },

src/router/modules/breadcrumb.example.ts

@@ -242,7 +242,6 @@ const routes: RouteRecordRaw = {
     },
     {
       path: 'extend',
-      redirect: 'pageheader',
       name: 'componentExampleExtend',
       meta: {
         title: '扩展组件',

src/router/modules/component.example.ts

@@ -7,7 +7,6 @@ function Layout() {
 const routes: RouteRecordRaw[] = [
   {
     path: '/official',
-    redirect: '/official/fantastic-startkit',
     component: Layout,
     meta: {
       title: '官方周边',
@@ -48,7 +47,6 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/recommand',
-    redirect: '/recommand/vform',
     component: Layout,
     meta: {
       title: '友情推荐',

src/router/modules/ecology.example.ts

@@ -7,7 +7,6 @@ function Layout() {
 const routes: RouteRecordRaw = {
   path: '/link',
   component: Layout,
-  redirect: '/link/gitee',
   name: 'externalLinkExample',
   meta: {
     title: '外链',

src/router/modules/external.link.example.ts

@@ -7,7 +7,6 @@ function Layout() {
 const routes: RouteRecordRaw = {
   path: '/feature_example',
   component: Layout,
-  redirect: '/feature_example/clipboard',
   name: 'featureExample',
   meta: {
     title: '功能',