如何解决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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
JavaScript实现拖拽效果
Mar 16 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
pandas string转dataframe的方法
2018/04/11 Python
使用python存储网页上的图片实例
2018/05/22 Python
python实现字符串和字典的转换
2018/09/29 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
休假证明书
2015/06/24 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
党员干部学习心得体会
2016/01/23 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript