尚品汇后台管理项目:刷新页面后空白问题解决方案
问题描述:跟着老师敲得项目代码,在配置动态路由后出现了 除home首页外其他页面只要点击浏览器的刷新按钮就会空白的问题
home首页刷新可以正常显示
其他页面刷新后空白,图片为 用户管理--角色列表的截图
解决方案:在路由跳转前判断是否被添加过【解决方案参考 Vue3动态添加路由及解决页面刷新空白问题 - 小猪琪琪 - 博客园 (cnblogs.com)】
permission.js中配置全局路由守卫
// 设置flag,防止非权限路由,页面死循环重定向 let flag = 0 router.beforeEach(async (to, from, next) => { // 在路由跳转前判断是否被添加成功--解决除首页外其他页面浏览器刷新空白问题 if (flag === 0 && to.matched.length === 0) { flag++ next({ path: to.path }) } else if (flag !== 0 && to.matched.length === 0) { // next({ path: '/' }) next(false) } else { next() } //判断token的代码正常书写 })