如何解决vue在ios微信"复制链接"功能问题


Posted in Javascript onMarch 26, 2020

这个问题在安卓上是完全没有问题的,可是到了iPhone上就彻底失效了。因为ios微信对vue路由中的#号识别问题。

我的解决办法是在初始进入项目时重新拼接项目地址,再重定向到拼接的地址去。

先获取到#号前的路由地址,再手动添加我们的#号和当前项目地址后缀:

在路由router.js里的beforeEach函数写

截取地址

// 重定向功能,为解决ios微信上复制链接功能不能复制到动态路由问题
// 获取地址前段部分,不算参数
 var replaceUrl = window.location.href.split('#')[0] + '#' + to.path;
 var index = 0; // 索引初始化
 // 给replaceUrl拼接参数
 for (var i in to.query) {
  // 判断是否等于第一个参数
  if (index == 0) {
   // 拼接地址第一个参数,添加“?”号
   replaceUrl += '?' + i + '=' + to.query[i]
  } else {
   // 拼接地址非第一个参数,添加“&”号
   replaceUrl += '&' + i + '=' + to.query[i]
  }
  index++; // 索引++
 }

重定向跳转

window.location.replace(replaceUrl); // 重定向跳转

全部代码

router.beforeEach((to, from, next) => {  
next();
// 重定向功能,为解决ios微信上复制链接功能不能复制到动态路由问题
// 获取地址前段部分,不算参数
var replaceUrl = window.location.href.split('#')[0] + '#' + to.path;
var index = 0; // 索引初始化
// 给replaceUrl拼接参数
for (var i in to.query) {
 // 判断是否等于第一个参数
 if (index == 0) {
  // 拼接地址第一个参数,添加“?”号
  replaceUrl += '?' + i + '=' + to.query[i]
 } else {
  // 拼接地址非第一个参数,添加“&”号
  replaceUrl += '&' + i + '=' + to.query[i]
 }
 index++; // 索引++
}
// console.log('test20190117:' + to.meta.title, replaceUrl);
window.location.replace(replaceUrl); // 重定向跳转
// 重定向功能------end
});

原文链接:https://blog.csdn.net/qq_37235823/article/details/86476723

到此这篇关于如何解决vue在ios微信"复制链接"功能问题的文章就介绍到这了,更多相关vue 微信 ios复制链接内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
深入认识JavaScript中的函数
Jan 22 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 #Javascript
js实现带箭头的进度流程
Mar 26 #Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 #Javascript
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
javascript操作cookie
2017/01/17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
js 调用百度分享功能
2017/02/27 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python 列表理解及使用方法
2017/10/27 Python
python爬取网易云音乐评论
2018/11/16 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
商务经理岗位职责
2014/08/03 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
运动会闭幕式致辞
2015/07/29 职场文书