Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白

先确认在route.js 或者 main.js 中有没有使用路由守卫vue.beforeEach和vue.addRouter() 促使页面每次刷新，重新根据后台返回数据生成动态路由。

// 避免路由守卫进入死循环
let onceRun = true;
router.beforeEach((to,from,next)=>{if(onceRun){onceRun = false;createNewRouter();// 确保动态路由创建成功后，再去执行其它代码逻辑；在默认的hash模式下，动态路由可能还没创建完成，就跑其它代码next({...to, replace: true}) } else {// TODO 这里可以写权限校验的路由跳转校验操作}
})function createNewRouter(){// vue.addRouters() 已经过时，不要使用；替代方案用vue.addRouter()// 创建动态路由// 尽量不要使用用缓存，sessionstorage/localstorage
};

如果刷新之后成功了，但回退发生了问题请把路由模式切换成 history，vue-route 默认使用hash模式。也就是地址上出现眨眼的 /#/ 当然 history模式本体跑没问题。

Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白相关推荐

从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由+同构...
上期回顾说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
vue动态路由添加后刷新显示空白页或404
刷新显示空白页面原因:页面刷新会导致vuex数据丢失,所以无法动态添加路由 1.在store user.js state中添加字段isAddRoutes:false,用来判断是否已经添加完动态路由的 ...
vue动态路由刷新匹配错误问题以及解决办法
目录一.了解动态路由二.解决问题结论一.了解动态路由我这里说的动态路由指的是,由后端提供当前角色可以访问的所有路径,前端提前写好路径与组件之间的映射也就是route,然后根据后端返回的u ...
vue动态路由刷新丢失解决方案
问题出现的问题动态路由添加刷新页面出现空白页面或者404页面因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会 ...
vue动态路由刷新白屏问题解决方法
出现刷新白屏的问题原因很好理解,就是由于加载了动态路由,刷新后动态路由消失,所以就出现了白屏问题,解决方式是判断在刷新的时候重新添加动态路由就行了.(参考大神的经验,最终解决了我的问题,感谢...) ...
vue动态路由权限管理
通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了. 动态路由设置一般有两种: (1).简单的角色路由设置:比如只涉及到管理员和普通用户 ...
路由原理及vue实现动态路由
路由原理在前端开发中,路由通常用于实现 SPA 应用程序,即在一个页面中切换不同的内容或页面,而不需要重新加载整个页面.路由的实现原理是通过监听 URL 的变化,然后根据不同的 URL 加载不同的内 ...
vue 动态路由实现
vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单.如下: 1.菜单接口返回结果的数据结构 [{"url": "/system& ...

Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白

Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白相关推荐

最新文章

热门文章