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     //重新复制给storedata.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     //重新复制给storedata.forEach(e=>{        //循环添加路由router.addRoute(e) }) //添加404动态路由router.addRoute({path: "/:catchAll(.*)",redirect: "/404",})next(to.path)  //添加完成后再次进入}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！