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跳转地址正常。

发布了54 篇原创文章 · 获赞 22 · 访问量 7238

猜你喜欢

转载自blog.csdn.net/Riona_cheng/article/details/100780021