zoukankan      html  css  js  c++  java
  • vue-router 在微信浏览器中操作history URl未改变的解决方案

    在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

    1.  
      router.beforeEach((to, from, next) => {
    2.  
      setTimeout(function () {
    3.  
      window.location = window.location;
    4.  
      }, 500);
    5.  
      });
       
      window.location.href = window.location.href.replace(/perscript/PrescriptionNotes/,"PrescriptionPay")

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

  • 相关阅读:
    基于策略模式简单实现element表单校验
    跨域
    原型模式
    单例模式
    vue-router进阶篇
    vue-router
    h5深度剖析
    js同步异步,任务队列
    JavaScript中事件委托(事件代理)详解
    网络请求get和post的区别
  • 原文地址:https://www.cnblogs.com/Tohold/p/9232943.html
Copyright © 2011-2022 走看看