问题出现的问题

动态路由添加刷新页面出现空白页面或者404页面

因为界面刷新导致动态路由丢失，所以是空页面或者404

我添加动态路由了怎么还剩刷新依旧是空白页面呢？

因为动态路由添加后需要是新导航才会生效

解决方案

需要判断当前页面是否刷新了

本地存一个当前访问页面的路由下次刷新用来判断当前是否是页面刷新
使用vuex来存储动态路由数据，如果是空就是刷新页面了

案例

使用本地存储使用路由拦截器跳转之后存数据

//存访问路由
router.afterEach((to, from) => {localStorage.setItem("new",to.path)})
//处理动态路由
router.beforeEach((to, from, next) => {if(localStorage.getItem('new')){var path: any = localStorage.getItem('new')if (path == to.path) { //动态路由页面的刷新事件// localStorage.removeItem('new')store.commit('setBaseRouters')router.replace({...to});}}
})

vuex处理更简单需要添加路由拦截进行逻辑处理

router.beforeEach((to, from, next) => {store.commit('loginModule/isLogin')const isloginPage: boolean = getFilterRouterName((to.name as string));let state: any = store.stateif (isloginPage || state.loginModule.isLogin) {if (state.baseRouters.length==0) {store.commit('setBaseRouters')router.replace({...to});}next()}else {next({ name: LOGIN })}if (to.matched.length === 0) {// ElMessage.warning("当前路由不存在");/*** user_type ：customeruser_type :  supplier*///只有登录了才进入这个逻辑判断if(state.loginModule.isLogin){if(localStorage.getItem('userinfo')){let data = JSON.parse(localStorage.getItem('userinfo'))if (data.user_type == 'customer') {//这里处理如果访问项目根路径访问的if (to.path == '/admin/') {router.replace(import.meta.env.VITE_BASE + "/***");}} else {next({ name: PRODUCT })}}}}
})

vue动态路由刷新丢失解决方案相关推荐

vue动态路由刷新匹配错误问题以及解决办法
目录一.了解动态路由二.解决问题结论一.了解动态路由我这里说的动态路由指的是,由后端提供当前角色可以访问的所有路径,前端提前写好路径与组件之间的映射也就是route,然后根据后端返回的u ...
vue动态路由刷新白屏问题解决方法
出现刷新白屏的问题原因很好理解,就是由于加载了动态路由,刷新后动态路由消失,所以就出现了白屏问题,解决方式是判断在刷新的时候重新添加动态路由就行了.(参考大神的经验,最终解决了我的问题,感谢...) ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
一. spring cloud gateway集成 spring cloud stream binder kafka，实现“动态路由“刷新与加载之采坑记录
一.前言 Spring Cloud Stream是用于构建消息驱动的微服务应用程序的框架. 本文主要介绍如何集成 Spring Cloud Stream,以 Kafka发布订阅模式(topic),实现 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Vue动态路由路径重复以及刷新丢失页面问题
1.使用router.addRoutes(teacherRouter);添加完路由切换路由时,vue会警告路由名字重复问题出现原因是:动态路由添加时调佣addRoutes();它只会帮你注入路由,不 ...
VUE动态路由下刷新丢失路由的解决方法
目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage. 经过多次试验,采取在 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...

vue动态路由刷新丢失解决方案

问题出现的问题

解决方案

需要判断当前页面是否刷新了

案例

vue动态路由刷新丢失解决方案相关推荐

最新文章

热门文章