如何解决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 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
小程序转发探索示例
Feb 19 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
使用Python的内建模块collections的教程
2015/04/28 Python
python提取字典key列表的方法
2015/07/11 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python判断设备是否联网的方法
2018/06/29 Python
基于python实现学生管理系统
2018/10/17 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python属性和内建属性实例解析
2020/01/14 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
遥感技术与仪器求职信
2014/02/22 职场文书
拔河比赛口号
2014/06/10 职场文书
会计学专业求职信
2014/07/17 职场文书
运动会演讲稿50字
2014/08/25 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书