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

34人阅读 评论(0) 收藏 举报
分类:

在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标签跳转,
2.hash路由跳转后直接在跳转一次页面:window.location.herf = window.location.herf

router.beforeEach((to, from, next) => {
setTimeout(function () {
window.location = window.location;
}, 500);
});

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

查看评论

阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL

阻止微信后退按钮 var isFirstLoad = true; //是否是第一次进入进入页面 勿用 var needBack=false;   //是否允许浏览器后退 ...
  • u012875794
  • u012875794
  • 2017年01月20日 10:25
  • 2948

vue-router下的html5 history在iis服务器上的设置 vue去掉#

首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台...
  • caijunfen
  • caijunfen
  • 2017年12月07日 10:02
  • 435

浏览器history对象关于历史记录的使用

欢迎使用Markdown编辑器写博客场景一:比如本页是B页面,前一页是A页面,现在是在跳转到下一页C页面前使用history.replaceState把本页的URL改成D页面,这样在C页面中点击返回就...
  • u013182675
  • u013182675
  • 2016年10月28日 14:05
  • 1541

vue-router浏览器跳转

问题一:vue-router单页跳转为什么不刷新?我们知道通过vue-router进行页面跳转时,组件会被重新执行,由于变量存在内存中,所以页面不会刷新。但,使用href、window.locatio...
  • ZYY88886666
  • ZYY88886666
  • 2017年11月30日 17:47
  • 231

javascript浏览器对象——History对象

History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标...
  • oscar92420aaa
  • oscar92420aaa
  • 2016年07月07日 10:26
  • 296

tomcat服务如何配置vue-router的history模式

tomcat 目录下免得conf文件夹里面的web.xml文件加上下面的配置 display-name>webappdisplay-name> description> webap...
  • Sky786905664
  • Sky786905664
  • 2017年10月13日 15:53
  • 1601

servlet中使用vue-router history模式&前端配置记录

目录结构- dist // webpack打包后的文件夹 | - bundle.js - // ...woff,ttf,svg等 - static // 图片等资源文件夹 - WEB-INF ...
  • dislido
  • dislido
  • 2017年09月26日 11:01
  • 238

vue vue-Router默认hash模式修改为history需要做的修改

主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值然后登录的时候是...
  • u010289111
  • u010289111
  • 2018年02月12日 11:04
  • 450

history.pushState无刷新改变url

通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容。但随着单页应...
  • helloxiaoliang
  • helloxiaoliang
  • 2017年06月28日 17:00
  • 562

微信浏览器中进行支付宝支付

B端项目使用的是支付宝手机网页支付,微信浏览器中屏蔽了支付宝的功能。上有政策下有对策,支付宝也有应对的办法,下来就来说一说支付宝手机网站支付。第一步:开发准备工作 登录支付宝平台(需要实名认证的支付...
  • sinat_28898561
  • sinat_28898561
  • 2017年09月07日 17:44
  • 533
    个人资料
    持之以恒
    等级:
    访问量: 41万+
    积分: 6222
    排名: 5019
    技术交流
    QQ联系方式:326202439
    最新评论