资讯专栏INFORMATION COLUMN

记 vue-router 在微信浏览器中操作history URl未改变的解决方案

hzx / 2974人阅读

摘要:暂时解决了这个问题因为我在项目中测试只有在微信中出现这个问题,所以只针对在微信中特殊处理。

背景

在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示;但是在微信中,从/a页面通过router.push("/b")跳转到/b页面后,页面正常,但是复制浏览器的地址会发现其地址仍为/a;选择在浏览器打开发现也是显示的/a的页面。
这应该是微信浏览器那边的问题,微信浏览器只会记住你第一次进来的地址。

微信浏览器不会自动添加 #

在pc端或者手机浏览器开发的时候 输入localhost:8080,浏览器会自动跳转到localhost:8080/#/,但是在微信浏览器中,虽然页面显示正常了,但是我们通过微信右上角的选项复制当前的地址,会发现地址为仍然localhost:8080,这后面导致了其他的 router.push()操作都无法修改微信浏览器的url;当然,如果我们在程序中alert(location.href)是正常的。

解决方案

在进入页面的时候我们默认的给url加上#,即localhost:8080/#/,再次测试后发现 安卓 中微信浏览器的url和我们项目中的url相对应了。

iOS中微信浏览器url仍然不对应

处理完上面的问题后测试安卓机正常了,但是iOS机型微信中在/b页面复制地址中仍然/a页面,查看资料网上很多人都说可以通过链接的方式处理。

1.用history的时候,把router-link换成a标签跳转,

我的处理方式是点击跳转后直接使用window.location.herf = "localhost:8080/#/b"的方式,即直接拼接好跳转的后路由地址。暂时解决了这个问题
因为我在项目中测试只有ios在微信中出现这个问题,所以只针对ios在微信中特殊处理。其他情况下还是通过hash路由正常处理。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94279.html

相关文章

  • jssdk 在history模式下安卓不能调用图片上传接口和分享接口

    摘要:配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。 首先说明,应用环境是使用的是vue+vue-router,history模式开发的单页应用。 配置 先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

    dkzwm 评论0 收藏0
  • vue.js 微信JS-SDK分享、微信支付、扫一扫等签名失效解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    jay_tian 评论0 收藏0
  • vue.js 微信JS-SDK分享、微信支付、扫一扫等签名失效解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    keithxiaoy 评论0 收藏0
  • vue.js 微信JS-SDK分享、微信支付、扫一扫等签名失效解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    付永刚 评论0 收藏0

发表评论

0条评论

hzx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<