如何解决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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
易被忽视的js事件问题总结
May 14 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP数组相关函数汇总
2015/03/24 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python中global与nonlocal比较
2014/11/21 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
事业单位考核材料
2014/05/21 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL