如何解决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 jQuery中的DOM操作
Mar 21 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
vue2实现provide inject传递响应式
May 21 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Vue.js用法详解
2017/11/13 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python实现CET查分的方法
2015/03/10 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
函授大专自我鉴定
2013/11/01 职场文书
寒假思想汇报
2014/01/10 职场文书
给孩子的新年寄语
2014/04/08 职场文书
村抢险救灾方案
2014/05/09 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
python用字节处理文件实例讲解
2021/04/13 Python