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
- router.beforeEach((to, from, next) => {
- setTimeout(function () {
- window.location = window.location;
- }, 500);
- });
window.location.href = window.location.href.replace(/perscript\/PrescriptionNotes/,"PrescriptionPay")
我的处理方式是点击跳转后直接使用window.location.herf = 'localhost:8080/#/b'的方式,即直接拼接好跳转的后路由地址。暂时解决了这个问题
因为我在项目中测试只有ios在微信中出现这个问题,所以只针对ios在微信中特殊处理。其他情况下还是通过hash路由正常处理。
vue-router 在微信浏览器中操作history URl未改变的解决方案的更多相关文章
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- websocketj--随时随地在Web浏览器中操作你的服务端程序
0 - 有没有觉得Linux标准终端界面输入输出枯燥无味? 1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出? 2 - 尝试过用浏览器操作Windows中的cmd吗? ...
- 解决微信浏览器中无法一键拨号问题tel
公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...
- 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- js判断是否是在微信浏览器中打开
// js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...
- controller中的路径明明书写正确,浏览器中访问的url也拼接正确,但报404
Bug:controller中的路径明明书写正确,浏览器中访问的url也拼接正确,但报404 原因一:由于路由地址对应的处理方法存在同名而造成的,此时应该检查controller的方法们,看看有没有同 ...
随机推荐
- 【极大化剪枝】Power Hungry Cows-C++【没有用A*!】【超级简单!】
Description小KITTY想要快速计算整数P的幂 (1 <= P <=10,000),它们需要你的帮助.因为计算极大数的幂,所以它们同一时间仅能使用2个存储器,每个存储器可记录某个 ...
- Navicat permium快捷键
Ctrl + F 搜索本页数据 Ctrl + Q 打开查询窗口 Ctrl + / 注释sql语句 Ctrl + Shift + / 解除注释 Ctrl + R 运行查询窗口的sql语句 Ctrl + ...
- 收藏加备用。ext.xfs文件系统 文件恢复
注意 当确认误删除文件后立刻使用各种方式阻止新数据在写入该分区了. 设置只读或umount都可以 ext2 3 4 文件系统 可以用 extundelete 这个工具来恢复. github地址: ht ...
- element-ui下拉按钮的用法
<el-dropdown class="avatar-container" trigger="click"> <div class=" ...
- 1558:聚会 ybt
1558:聚会 ybt 题解(看似很难,其实要是摸清了实质这就是个大水题) 上题目 1558:聚会 时间限制: 1000 ms 内存限制: 524288 KB提交数: 82 通 ...
- git reset 版本回退操作
1 git回退命令 git reset --hard GIT_HEAD GIT_HEAD是你具体要回退的分支: 如图: 注: 查询GIT_HEAD可以通过两个命令:git log 获取未删除 ...
- 3.1 Go语言基础之指针
区别于C/C++中的指针,Go语言中的指针不能进行偏移和运算,是安全指针. 要搞明白Go语言中的指针需要先知道3个概念:指针地址.指针类型和指针取值. 一.Go语言中的指针 Go语言中的函数传参都是值 ...
- SQL-W3School-基础:SQL AND & OR 运算符
ylbtech-SQL-W3School-基础:SQL AND & OR 运算符 1.返回顶部 1. AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 ...
- C#中用委托实现C++的回调函数
C++中抓图回调函数 void (CALLBACK* DisplayCBFun)(long nPort,char * pBuf,long nSize,long nWidth,long nHeight, ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_19-CMS前端页面查询开发-页面原型-Table组件测试
页面填充内容.用一个表格来显示内容 3.1.2.1 Element-UI介绍 本项目使用Element-UI来构建界面,Element是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...