如何解决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 ajax提交表单数据的两种方式
Nov 24 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
抓取YAHOO股票报价的类
2009/05/15 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
浅谈js闭包理解
2019/03/28 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
异步传递消息系统的作用
2016/05/01 面试题
喜之郎果冻广告词
2014/03/20 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
师德培训心得体会2016
2016/01/09 职场文书
《法国号》教学反思
2016/02/22 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python