动态路由下刷新页面空白

前言

最近设计动态路由时，刷新页面空白。突然想起以前笔记里面记录过，翻看了下，今天得空儿分享出来。

问题描述

在全局前置守卫router.beforeEach里面加入动态路由设计时，刷新动态页面，明明router已经生成了，结果还是空白，打印后发现to对象里面除了path其余属性皆为空值(如下图)。

原因

在刷新后动态路由需要重新获取，而to对象是在动态路由生成之前产生，所以获取不到真正路由信息。

解决方案

方案一
正常的next()加个matched长度判断，matched是当前路由的所有嵌套路径片段的路由记录。

...省略正常判断路由是否存在...
if (to.matched.length ===0) next({path: to.path})
else next()

方案二

if(!token){...省略生成动态路由...router.addRoutes(menuRouters);if (to.path) {next({ path: to.path });} else {next();}
} else {console.log("动态菜单和路由已存在");next();
}

方法很多，注意不要陷入死循环即可，以上提供两种供大家参考！

动态路由下刷新页面空白相关推荐

VUE动态路由下刷新丢失路由的解决方法
目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage. 经过多次试验,采取在 ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
h5 uniapp history模式下刷新页面404
h5 uniapp history模式下刷新页面404 问题:uniapp 的history 把#去掉了,但是当刷新页面的时候出现404 解决方案需要服务端支持如果 URL 匹配不到任何静态资源, ...
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
vue动态路由添加后刷新显示空白页或404
刷新显示空白页面原因:页面刷新会导致vuex数据丢失,所以无法动态添加路由 1.在store user.js state中添加字段isAddRoutes:false,用来判断是否已经添加完动态路由的 ...
Vue-i18n在Routerd动态路由下实现国际化
在Electron-vue-admin的项目中实现国际化的需求时,遇到一个问题,vue-i8n无法在router/index.js的路由菜单配置项内以下面常规的方法实现. //vue标签内使用(例:) ...
uniapp打包H5下history模式下刷新页面丢失处理
解决方案:https://www.cnblogs.com/zyfenblog/p/13865523.html
vue动态路由刷新丢失解决方案
问题出现的问题动态路由添加刷新页面出现空白页面或者404页面因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会 ...
vue 跳转至当前路由，并刷新页面
携带不同参数跳转至当前路由,刷新页面并获取该参数借助空页面实现例如:由 /detail?id=1 跳转至 /detail?id=2 detail.vue export default {metho ...

动态路由下刷新页面空白

前言

问题描述

原因

解决方案

动态路由下刷新页面空白相关推荐

最新文章

热门文章

动态路由下刷新 页面空白

前言

问题描述

原因

解决方案

动态路由下刷新 页面空白相关推荐

最新文章

热门文章

动态路由下刷新页面空白

动态路由下刷新页面空白相关推荐