在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路由正常处理。

vue-router 在微信浏览器中操作history URl未改变的解决方案的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  3. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. websocketj--随时随地在Web浏览器中操作你的服务端程序

    0 - 有没有觉得Linux标准终端界面输入输出枯燥无味? 1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出? 2 - 尝试过用浏览器操作Windows中的cmd吗? ...

  5. 解决微信浏览器中无法一键拨号问题tel

    公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...

  6. 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)

    1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...

  7. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  8. js判断是否是在微信浏览器中打开

    // js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...

  9. controller中的路径明明书写正确,浏览器中访问的url也拼接正确,但报404

    Bug:controller中的路径明明书写正确,浏览器中访问的url也拼接正确,但报404 原因一:由于路由地址对应的处理方法存在同名而造成的,此时应该检查controller的方法们,看看有没有同 ...

随机推荐

  1. 003_FREERTOS任务基础知识

    (一)任务状态 FreeRTOS 中的任务永远处于下面几个状态中的某一个: ● 运行态当一个任务正在运行时,那么就说这个任务处于运行态,处于运行态的任务就是当前正在使用处理器的任务.如果使用的是单核处 ...

  2. 004_STM32程序移植之_SHTXX

    1. 测试环境:STM32C8T6 2. 测试模块:DS1302时钟模块 3. 测试接口: SHTXX土壤温湿度: VCC------------------3.3V GND------------- ...

  3. luogu 5354 [Ynoi2017]由乃的OJ LCT+位运算

    如果做过起床困难综合征的话应该很快就能有思路,没做过那道题的话还真是挺费劲的. 我们不知道要带入的值是什么,但是我们可以知道假设带入值得当前位为 $1$ 时这一位在经过位运算后是否为 $1$. 至于这 ...

  4. ps/top

    ps -e 显示所有进程,环境变量 -f 全格式显示 -a 显示所有用户的所有进程(包括其他用户) -u 按用户名和启动时间的顺序显示进程 -x 显示无控制终端的进程 -w 显示加宽可以显示较多信息 ...

  5. 关于matlab GUI 的一些总结

    最近在 用matlab做一个GUI的用户界面 大多都是百度出来 摸索的学习 总结一下遇到的一些问题和解决方法 一: 在文本框动态显示文本 (保留之前的文本并显示当前文本内容): 在文本框显示文本 基本 ...

  6. 在Android中使用OpenGL ES开发第(五)节:GLSL基础语法

    一.前期基础储备笔者之前的四篇文综述了Android中使用OpenGL ES绘制基本图形和实现了简单的相机预览,初次接触OpenGL ES开发的读者可能对其中新的概念比较迷惑,尤其是其中的顶点着色器( ...

  7. Friends (ZOJ - 3710)

    Problem Alice lives in the country where people like to make friends. The friendship is bidirectiona ...

  8. Irrlicht引擎剖析二

  9. storm滑动窗口

    Window滑动方式: 没有数据不滑动windowLength:窗口的时间长度/tuple个数slidingInterval:滑动的时间间隔/tuple个数 withWindow(Duration w ...

  10. Maven:element '******' cannot have character [children]

    此错误是由于XML文件的解析不正确造成的,因为在一个/某些标签之间存在奇怪和隐藏的字符. 这些字符可能来自网络上的复制粘贴.要解决此问题,请删除标签>标记定义之间的所有空格和换行符,然后将它们放 ...