Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白

  1. 先确认在route.js 或者 main.js 中有没有使用路由守卫vue.beforeEach和vue.addRouter() 促使页面每次刷新,重新根据后台返回数据生成动态路由。
// 避免路由守卫进入死循环
let onceRun = true; 
router.beforeEach((to,from,next)=>{
  if(onceRun){
    onceRun = false;
    createNewRouter();
    // 确保动态路由创建成功后,再去执行其它代码逻辑;在默认的hash模式下,动态路由可能还没创建完成,就跑其它代码
    next({...to, replace: true}) 
  } else {
    // TODO 这里可以写权限校验的路由跳转校验操作
  }
})
  
function createNewRouter(){
  // vue.addRouters() 已经过时,不要使用;替代方案用vue.addRouter()
  // 创建动态路由
  // 尽量不要使用用缓存,sessionstorage/localstorage
};
  1. 如果刷新之后成功了,但回退发生了问题 请把路由模式切换成 history,vue-route 默认使用hash模式。也就是地址上出现眨眼的 /#/ 当然 history模式本体跑没问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

琴 韵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值