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

This commit is contained in:
Hooray
2025-05-05 00:58:15 +08:00
parent d572e6d933
commit 34c7e41028
21 changed files with 438 additions and 234 deletions
@@ -10,7 +10,7 @@ import { useFocus } from '@vueuse/core'
import hotkeys from 'hotkeys-js'
defineOptions({
name: 'Search',
name: 'NavSearchModal',
})
const isShow = defineModel<boolean>({
-4
View File
@@ -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: '权限验证',
+21
View File
@@ -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)
-2
View File
@@ -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(层级模式)',
},
-1
View File
@@ -242,7 +242,6 @@ const routes: RouteRecordRaw = {
},
{
path: 'extend',
redirect: 'pageheader',
name: 'componentExampleExtend',
meta: {
title: '扩展组件',
-2
View File
@@ -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: '友情推荐',
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/link',
component: Layout,
redirect: '/link/gitee',
name: 'externalLinkExample',
meta: {
title: '外链',
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/feature_example',
component: Layout,
redirect: '/feature_example/clipboard',
name: 'featureExample',
meta: {
title: '功能',
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/icon_example',
component: Layout,
redirect: '/icon_example/svg',
name: 'iconExample',
meta: {
title: '扩展图标',
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/jsx_example',
component: Layout,
redirect: '/jsx_example/index',
name: 'jsxExample',
meta: {
title: 'JSX',
-2
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/keep_alive_example',
component: Layout,
redirect: '/keep_alive_example/page',
name: 'keepAliveExample',
meta: {
title: '页面缓存',
@@ -35,7 +34,6 @@ const routes: RouteRecordRaw = {
},
{
path: 'nested',
redirect: '/keep_alive_example/nested/detail',
meta: {
title: '嵌套路由',
menu: false,
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/mock_example',
component: Layout,
redirect: '/mock_example/index',
name: 'mockExample',
meta: {
title: 'Mock',
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/multilevel_menu_example',
component: Layout,
redirect: '/multilevel_menu_example/page',
name: 'multilevelMenuExample',
meta: {
title: '多级导航',
@@ -25,7 +24,6 @@ const routes: RouteRecordRaw = {
{
path: 'level2',
name: 'multilevelMenuExample2',
redirect: '/multilevel_menu_example/level2/page',
meta: {
title: '导航2',
},
@@ -41,7 +39,6 @@ const routes: RouteRecordRaw = {
{
path: 'level3',
name: 'multilevelMenuExample2-2',
redirect: '/multilevel_menu_example/level2/level3/page1',
meta: {
title: '导航2-2',
},
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/permission_example',
component: Layout,
redirect: '/permission_example/index',
name: 'permissionExample',
meta: {
title: '权限验证',
-2
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/plugin_example',
component: Layout,
redirect: '/plugin_example/qrcode',
name: 'pluginExample',
meta: {
title: '插件',
@@ -70,7 +69,6 @@ const routes: RouteRecordRaw = {
},
{
path: 'chart',
redirect: '/chart/echarts',
name: 'pluginExampleChart',
meta: {
title: '图表',
-1
View File
@@ -7,7 +7,6 @@ function Layout() {
const routes: RouteRecordRaw = {
path: '/tab_example',
component: Layout,
redirect: '/tab_example/index',
name: 'tabExample',
meta: {
title: '标签栏',
+3 -5
View File
@@ -47,12 +47,10 @@ function open(url: string) {
</FaButton>
</div>
</template>
<ElButton @click="open('https://element-plus.org/#/zh-CN')">
<template #icon>
<FaIcon name="i-ep:link" />
</template>
<FaButton variant="outline" @click="open('https://element-plus.org/#/zh-CN')">
<FaIcon name="i-ep:link" />
Element Plus 官网
</ElButton>
</FaButton>
</FaPageHeader>
<FaPageMain>
<ElTabs type="border-card">
+3 -5
View File
@@ -498,12 +498,10 @@ function open(url: string) {
<template>
<div>
<FaPageHeader title="常用正则" description="正则来源于 Github 上 any-rule 项目">
<ElButton @click="open('https://github.com/any86/any-rule')">
<template #icon>
<FaIcon name="i-ep:link" />
</template>
<FaButton variant="outline" @click="open('https://github.com/any86/any-rule')">
<FaIcon name="i-ep:link" />
访问 any-rule
</ElButton>
</FaButton>
</FaPageHeader>
<FaPageMain v-for="(item, index) in rules" :key="index" :title="item.title">
<div class="rule">
+3 -5
View File
@@ -33,12 +33,10 @@ function open(url: string) {
<template>
<div>
<FaPageHeader title="VueUse" description="VueUse 是一个 Vue Composition API 实用程序的集合,更多 API 和例子请查看 VueUse 官网。">
<ElButton @click="open('https://vueuse.org/')">
<template #icon>
<FaIcon name="i-ep:link" />
</template>
<FaButton variant="outline" @click="open('https://vueuse.org/')">
<FaIcon name="i-ep:link" />
VueUse 官网
</ElButton>
</FaButton>
</FaPageHeader>
<FaPageMain title="防抖:debounce">
<p class="mt-0">