vue动态路由刷新白屏问题解决方法

当使用Vue进行前端开发时,遇到刷新页面出现白屏的现象,原因在于动态路由在刷新后丢失。解决方法是在刷新时通过 vuex 检查状态并重新获取和设置动态路由。这段代码展示了如何在权限检查中重新加载动态路由,从而避免白屏错误。
摘要由CSDN通过智能技术生成

出现刷新白屏的问题原因很好理解,就是由于加载了动态路由,刷新后动态路由消失,所以就出现了白屏问题,解决方式是判断在刷新的时候重新添加动态路由就行了。(参考大神的经验,最终解决了我的问题,感谢...)

//permission.js
if (!store.state.menuManage.ifChange) {
        const hebing = true
        await store.dispatch('getTbMenuQueryData', hebing)
        next({ ...to, replace: true })
      } else {
        next()
      }
//menuManage.js
getTbMenuQueryData({ commit, state }, hebing) {
    return new Promise((resolve, reject) => {
      let webMenu = JSON.parse(getSession('webMenu'))
      if (webMenu) {
        try {
          if (!state.asyncRoute.length && hebing) {
            commit('SETROUTES', filterAsyncRouter(webMenu))
          }
        } catch (error) {
          console.log(error)
        }
        resolve(webMenu)
      } else {
        ...
      }
    })
  },


SETROUTES: (state, d) => {
    ...
    router.matcher = new VueRouter({
      routes: resultAllroute,
    }).matcher
    state.ifChange = true
  },

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值