* 新增导航防护机制 - NavigationGuard类防止快速路由切换导致的错误 - 实现防抖和安全导航方法(safePush/safeReplace) * 新增组件安全加载机制 - safeAsyncComponent包装器处理异步组件加载错误 - 支持重试机制和ChunkLoadError恢复 * 增强路由守卫错误处理 - 全面的try-catch错误捕获 - 统一的路由错误处理函数 * 优化路由配置 - 使用安全组件加载器包装所有异步组件 - 改进路由重定向逻辑 解决了"Cannot read properties of null (reading 'isUnmounted')"等Vue Router错误
30 lines
958 B
TypeScript
30 lines
958 B
TypeScript
import type { App } from 'vue'
|
|
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
|
|
import { setupRouterGuard } from './guard'
|
|
import { routes } from './routes.inner'
|
|
import { createNavigationGuard } from '@/utils/navigation-guard'
|
|
|
|
const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
|
|
export const router = createRouter({
|
|
history: VITE_ROUTE_MODE === 'hash' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
|
|
routes,
|
|
// 添加路由配置优化
|
|
scrollBehavior(to, from, savedPosition) {
|
|
if (savedPosition) {
|
|
return savedPosition
|
|
}
|
|
return { top: 0 }
|
|
},
|
|
})
|
|
|
|
// 创建导航防护实例
|
|
export const navigationGuard = createNavigationGuard(router)
|
|
|
|
// 安装vue路由
|
|
export async function installRouter(app: App) {
|
|
// 添加路由守卫
|
|
setupRouterGuard(router)
|
|
app.use(router)
|
|
await router.isReady() // https://router.vuejs.org/zh/api/index.html#isready
|
|
}
|