场景:
移动端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跳转地址正常。