暂时需要配置一个白名单静态路由,步骤如下:
1、src/router/routes/index.ts 内定义路由
export const RegionRoute: AppRouteRecordRaw = {
path: '/region',
name: 'Region',
component: () => import('@/views/system/region/index.vue'),
meta: {
title: '地区',
},
};
export const basicRoutes = [
RegionRoute,
];
2、src/enums/pageEnum.ts内添加路由配置
export enum PageEnum {
BASE_REGION = '/region',
}
3、src/router/guard/permissionGuard.ts内配置白名单
import { PageEnum } from '@/enums/pageEnum';
const REGION_PATH = PageEnum.BASE_REGION;
const whiteList: PageEnum[] = [REGION_PATH];
if (whiteList.includes(to.path as PageEnum)) {
if (to.path === REGION_PATH) next();
}
// 可以写简洁点
4、在src/router/index.ts内引入并暴露,这一步vben已经做好处理,我这边是不用改动
import type { RouteRecordRaw } from 'vue-router';
import type { App } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import { basicRoutes } from './routes';
// 白名单应该包含基本静态路由
const WHITE_NAME_LIST: string[] = [];
const getRouteNames = (array: any[]) =>
array.forEach((item) => {
WHITE_NAME_LIST.push(item.name);
getRouteNames(item.children || []);
});
getRouteNames(basicRoutes);
// app router
// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({
// 创建一个 hash 历史记录。
history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
// 应该添加到路由的初始路由列表。
routes: basicRoutes as unknown as RouteRecordRaw[],
// 是否应该禁止尾部斜杠。默认为假
strict: true,
scrollBehavior: () => ({ left: 0, top: 0 }),
});
// reset router
export function resetRouter() {
router.getRoutes().forEach((route) => {
const { name } = route;
if (name && !WHITE_NAME_LIST.includes(name as string)) {
router.hasRoute(name) && router.removeRoute(name);
}
});
}
// config router
// 配置路由器
export function setupRouter(app: App<Element>) {
app.use(router);
}
最后,重新运行项目即可