如何解决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的cookie插件
Apr 07 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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自动反斜杠的函数代码
2010/01/05 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
python回调函数的使用方法
2014/01/23 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
培训自我鉴定
2014/01/31 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
公司人力资源管理制度
2015/08/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python