vue动态路由刷新失效以及404页面处理办法
作者：Gao_web
作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
前言
在开发后台管理项目，我们会使用vue动态路由做权限管理，但是使用vue动态路由时会遇到一些坑，这里总结一下，并提供解决思路
1.动态路由刷新页面失效问题
问题：刷新页面时会把addRouter添加的动态路由刷新掉，因此浏览器找不到之前添加的路由，便会进入白屏页面或者404页面
处理方式：判断是否刷新页面 如果刷新在路由守卫中再次添加动态路由
把添加的动态路由存入浏览器缓存和vuex或pinia中 如果刷新页面vuex和pinia存的内容将会丢失以此来判断是否刷新页面 然后从浏览器缓存中拿到再重新添加
router.beforeEach((to, from, next) => {
if(store.userRouter.length || to.path == '/' || to.path == '/index'){
next() //如果登录页或首页 或 vuex中有动态路由数据 直接通过
}else{
//拿到浏览器缓存中动态路由的数据 重新添加
const data = JSON.parse( localStorage.getItem('userRouter'))
store.userRouter = data //重新复制给store
data.forEach(e=>{ //循环添加路由
router.addRoute(e)
})
next(to.path) //添加完成后再次进入
}
})注意使用pinia在router配置文件中访问不到store，建议写在mian.js
userRouter为自定义变量 格式为数组包裹addRoute所需数组
2.动态路由搭配404页面使用
如果我们配置了404页面 用以上方式进入动态路由页面还是会进入404页面 我们需要将404页面的路由也动态追加
router.beforeEach((to, from, next) => {
if(store.userRouter.length || to.path == '/' || to.path == '/index'){
next() //如果登录页或首页 或 vuex中有动态路由数据 直接通过
}else{
//拿到浏览器缓存中动态路由的数据 重新添加
const data = JSON.parse( localStorage.getItem('userRouter'))
store.userRouter = data //重新复制给store
data.forEach(e=>{ //循环添加路由
router.addRoute(e)
})
//添加404动态路由
router.addRoute({
path: "/:catchAll(.*)",
redirect: "/404",
})
next(to.path) //添加完成后再次进入
}
})附：了解动态路由
我这里说的动态路由指的是，由后端提供当前角色可以访问的所有路径，前端提前写好路径与组件之间的映射也就是route，然后根据后端返回的url进行匹配，将匹配到的route加入到router里面。
后端返回的数据大概是这样：
提前写好的route的path一定要和上面的url对应：
export default {
path: '/main/analysis/overview',
name: 'overview',
component: overview,
children: []
}
动态添加就是遍历咱们上面提前写好的所有routes，看有没有和后端返回的url一样的，有到时候我们就先放到数组routes里，后面通过router.addRoute加入到路由里面去即可：
const routes = mapMenusToRoutes(userMenu)
routes.forEach((route) => {
router.addRoute('main', route)
})总结
到此这篇关于vue动态路由刷新失效以及404页面处理办法的文章就介绍到这了,更多相关vue动态路由刷新失效404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！