如何解决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 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
javascript字符串函数汇总
Dec 06 Javascript
js实现不重复导入的方法
Mar 02 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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 网页过期时间的控制代码
2009/06/29 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python如何实现word批量转HTML
2020/09/30 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
自考毕业自我鉴定范文
2013/10/27 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
护士旷工检讨书
2015/08/15 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
MySQL 时间类型的选择
2021/06/05 MySQL
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript