vue - history模式下 - 微信浏览器中页面跳转url路径不变问题

场景:

移动端web项目,使用vue中的 $router.push() 和 $router.replace() 做路由跳转时,微信浏览器中页面跳转正常,但通过微信浏览器复制链接,得到的却始终是最初刚进入页面时的地址。经测试发现,hash模式下地址显示正常,只有history模式下存在此问题。比如:
在微信浏览器中,项目的首页地址为localhost:8080/home, 当我通过 $router.push(’/list’) 跳转到列表页后,通过微信浏览器的复制链接,得到的仍然是localhost:8080/home。

问题原因:

微信浏览器对history模式支持不太友好导致, 它只会记住你第一次进来的地址。

解决方法:

在created钩子函数里给路由添加特殊标识:

created() {
	let _href = window.location.href // 获取当前地址
	if(_href.indexOf('&replace=1') <= -1){ // 若没有replace参数,则添加进去
	  window.location.replace(_href+'&replace=1')
	}
}

再次测试~url跳转地址正常。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值