如何解决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插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
Vue实现一个无限加载列表功能
Nov 13 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
学前端,css与javascript重难点浅析
Jun 11 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/08/27 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery中parents()方法用法实例
2015/01/07 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python如何将两个txt文件内容合并
2019/10/18 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
店长职务说明书
2014/02/04 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
岳麓书院导游词
2015/02/03 职场文书
学校德育工作总结2015
2015/05/11 职场文书
教务处教学工作总结
2015/08/10 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis