如何解决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 Array.remove() 数组删除
Aug 06 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
简单的分页代码js实现
May 17 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
Javascript实现信息滚动效果
May 18 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 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数据采集的详解
2013/06/02 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
python分割文件的常用方法
2014/11/01 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中list初始化方法示例
2016/09/18 Python
Python批量更改文件名的实现方法
2017/10/29 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
详解Python中第三方库Faker
2020/09/25 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
医院总经理职责
2013/12/26 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers