如何解决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 DOM 添加事件
Feb 14 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
详解jQuery中的事件
Dec 14 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
原生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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python分析学校四六级过关情况
2017/11/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python3.7 sys模块的具体使用
2019/07/22 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python线程join方法原理解析
2020/02/11 Python
Python 面向对象部分知识点小结
2020/03/09 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
党员批评与自我批评
2014/02/12 职场文书
局火灾防控工作方案
2014/05/25 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
html粘性页脚的具体使用
2022/01/18 HTML / CSS