首页 > 其他分享 >尚品汇后台管理项目:刷新页面后空白问题解决方案

尚品汇后台管理项目:刷新页面后空白问题解决方案

时间:2022-09-24 22:00:39浏览次数:80  
标签:解决方案 尚品 next 空白 flag 刷新 路由 页面

问题描述:跟着老师敲得项目代码,在配置动态路由后出现了 除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)// 此处为重点,非home页刷新后阻止跳转则回到了刷新前的页面
  } else {
    next()
  }
  //判断token的代码正常书写     
})

标签:解决方案,尚品,next,空白,flag,刷新,路由,页面
From: https://www.cnblogs.com/shiny-moon/p/16726773.html

相关文章