如何解决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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
vue 自定义 select内置组件
Apr 10 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
原生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之面向对象
2013/05/15 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python生成密码字典的方法
2018/07/06 Python
Python内存读写操作示例
2018/07/18 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
什么是继承
2013/12/07 面试题
实习教师自我鉴定
2013/09/27 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
优秀小学生家长评语
2014/01/30 职场文书
5s推行计划书
2014/05/06 职场文书
火箭队口号
2014/06/18 职场文书
师范类求职信
2014/06/21 职场文书
学历证明范文
2015/06/16 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python
MySQL分布式恢复进阶
2022/07/23 MySQL