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

问题描述：跟着老师敲得项目代码，在配置动态路由后出现了 除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的代码正常书写     
})