v3路由配置

发布时间 2023-06-15 09:24:42作者: 凿壁偷光,集思广益

import type { RouteRecordRaw } from 'vue-router';
import type { App } from 'vue';

import { createRouter, createWebHistory } from 'vue-router';
import { basicRoutes } from './routes';
import { REDIRECT_NAME } from './constant';

const WHITE_NAME_LIST: string[] = [REDIRECT_NAME];

// 白名单应该包含基本静态路由
const getRouteNames = (array: any[]) =>
array.forEach((item) => {
WHITE_NAME_LIST.push(item.name);
getRouteNames(item.children || []);
});
getRouteNames(basicRoutes);

// app router
const router = createRouter({
history: createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
routes: basicRoutes as unknown as RouteRecordRaw[],
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) {
app.use(router);
}

export default router;

使用: import router from '@/router';