如何解决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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
总结javascript三元运算符知识点
Sep 28 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Javascript继承机制详解
2017/05/30 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python全局变量操作详解
2015/04/14 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
在Python中使用HTML模版的教程
2015/04/29 Python
python实现将内容分行输出
2015/11/05 Python
python join方法使用详解
2019/07/30 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
python生成word合同的实例方法
2021/01/12 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
优秀员工自荐信范文
2013/10/05 职场文书
融资租赁计划书
2014/04/29 职场文书
青奥会口号
2014/06/12 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB