本文主要是介绍解决动态权限路由页面刷新空白404,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
需要将任意路由 path: '/:pathMatch(.*)*'
从固定路由中提取出来,在刷新时,等待用户信息获取完毕,将动态路由和任意路由通过 router.addRoute()
重新添加到路由中
// 固定路由
export const constantRoute = [ ... ]// 权限路由
export const asyncRoute = [...]// 任意路由(404路由可放在任意路由或固定路由中)
export const anyRoute = [{ path: '/:pathMatch(.*)*',redirect: '/404',name: 'any',// 通过 meta 可用于菜单展示判断meta: {title: '任意路由',hidden: true,}}
]
刷新时执行,可在pinia(或vuex)中实现
userInfo(){...// 获取用户信息,并从中提取动态路由 userAsyncRoute// 用于菜单展示,anyRoute可加可不加menuRoutes = [...constantRoute, ...userAsyncRoute, ...anyRoute];// 将anyRoute、userAsyncRoute添加到路由中[ ...anyRoute, ...userAsyncRoute].forEach((route: any) => {router.addRoute(route)})
}
路由守卫,可在permission.js中实现
//全局前置守卫
router.beforeEach(async (to, from, next) => {...// 等待用户信息加载完毕await userInfo()// 异步路由刷新,获取到用户信息时,异步路由还没有加载完毕,出现空白的效果// hack方法,确保addRoutes已完成next({ ...to, replace: true }) ...
})
这篇关于解决动态权限路由页面刷新空白404的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!