vue项目微信分享之后路由链接被破坏怎么办
异常现象:
多页面应用,路由采用hash模式,链接带有"#"。
在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出去的链接只能进入首页,无法正常跳转到其他路由。
//1. 初始路由链接: http://wx.xxx.com/wx/#/classifylist/1 //2. 分享链接被打开之后: http://wx.xxx.com/wx/?fromTimeline
解决思路:
最开始的想法就是去掉“#”,但是使用history模式去掉“#”之后,主路由(首页)可以正常访问,其他页面从主路由进入也是OK的,但是进入其他页面刷新页面的话就无法正常访问了。查资料,找大牛,结果还是多页面应用无法正常使用history模式,这条路走不通。
然后就是考虑使用其他字符替换“#”,然后在路由中对访问链接进行判断,如果是用户通过分享链接访问,把链接中的替换字符重新换回“#”,这样也就不会影响路由之间的跳转了,具体代码如下:
//在主vue中将路由中的"#"替换为"?",并将#后边的内容编码后追加到"?"后边 var urls=location.href.split('/#')[0]+"?"+encodeURIComponent(location.href.split('/#')[1])//路由中对访问url进行判断,如果是访问的分享链接,对链接进行路由还原,再重定向到正确的路由,微信追加的 ?fromtimeline 之类的参数已经被?切割掉了,务需理会 var href = location.href.split("?")[0]+"#"+decodeURIComponent(location.href.split("?")[1]) location.href = href
虽然有点麻烦,还是解决问题了,本地调试OK,测试服务器上也没问题,传到阿里云的服务器上又凌乱了:
后来尝试了下发现,只要不是项目中的真实路由,就会直接给出这个错误提示,也就是说直接被阿里云给拦下了,根本就到不了服务器,更别提路由中进行路由还原重定向了,继续探索新的方法!
既然阿里云不接受非真实路由访问,那就考虑后端重定向吧——后端提供接口,前端在分享配置中,对要分享出去的url进行编码,然后作为参数传递给后端接口,由后端接口直接把参数解码,还原前端路由,重定向,搞定!
var UrlAttr = location.href.split('#') var urls = wxShareLinkTransformUrl + "?host=" + encodeURIComponent(UrlAttr[0]) + "¶m=" + encodeURIComponent(UrlAttr[1])
途中 wxShareLinkTransformUrl 是后端提供接口,接收前端传递的域名以及路由参数,经后端处理重新合成完成的前端路由。
转载于:https://www.cnblogs.com/xyyt/p/7533091.html
vue项目微信分享之后路由链接被破坏怎么办相关推荐
- ios 微信分享重新编码链接_微信民众号IOS端复制链接失足,安卓端分享链接翻开只能进入首页等题目的处理...
近来在做某个需要在微信中翻开的项目,部份页面会经由过程微信分享或复制链接分享给其别人,然后就遇到了以下坑: 1.IOS端复制链接或在其他浏览器中翻开时,如果原网站链接原本应当是"http:/ ...
- vue 调用微信分享接口 分享截图图片
vue 调用微信分享接口 分享截图图片 现在好多应用 都需要分享 图片等等的需求 . 大体需要 这几个步骤 获取分享图片 将 ...
- vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决 参考文章: (1)vue项目微信端清理缓存问题解决 (2)http://www.cnblogs.com/sakura-lifangfang/p/9660550.htm ...
- H5 -- 自定义微信分享第三方页面链接的标题和小缩略图
需求:自定义微信分享第三方页面链接的标题和小缩略图(如图) 2018.6.4更新线 - - - - - - - - - - - - - - - - - - 更新:微信6.5.5版本以后调整了分享规则, ...
- vue中微信分享的踩坑之旅
最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...
- Vue实现微信分享好友,分享朋友圈。
实现微信分享功能. 1 .基于vue去实现在微信里去分享给你的微信好友,或者去分享到你的朋友圈里.如果是react 等等 一样用法. 2.目前实现微信分享功能是通过点击微信控件触发的,代码拿走直接用, ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
- ios 微信分享重新编码链接_iOS 微信分享文件【原创】
之前的微信分享都只是分享一个网页链接,最近项目中需要把excel文件分享给微信好友.这里的path是获取的本地文件的路径,找到这个文件并分享给微信好友. 代码示例: WXMediaMessage *m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
最新文章
- String s=a+b+c,到底创建了几个对象?
- Python3各种进制之间的转换方法
- Java中int转Double再转换成百分数并应用在求同比昨日增长率
- 《守望先锋》阵亡镜头、全场最佳和亮眼表现是如何设计
- C++读图片——Mac下对于bmp文件读写读取过大的解决方案
- The requested URL /**** was not found on this server
- linux的几个文本内容查看命令小结
- mysql学习笔记 查找技术 1207 0311
- Airflow 中文文档:调度和触发器
- 离线在线计算机系统,离线计算机系统
- 【模拟】牛客网:区间表达
- 原生js与jquery的区别
- maven中GroupID 和ArtifactID怎么写
- pdflib java_pdflib的使用代码
- 系统集成项目管理工程师
- 必看 logit回归分析步骤汇总
- 拿webshell的一些姿势
- Python基础之列表(list)操作
- 车载PHY的唤醒与睡眠的正确姿势
- 明天老外要上课,先准备一下词汇:)
热门文章
- ext教程_exe_作者blackant
- PAT1019. 数字黑洞
- ROS学习笔记4(编译一个ROS Package)
- 计算机二级法律一班题目,湖南省计算机二级考试 程序设计题目精选30道
- java locationuitool_求助systemui编译时哪里出错
- NBA Top Shot巨鲸17.5万美元购买的球星卡目前已值2000万美元
- Kava下一阶段Kava 5主网将于3月4日上线
- 检察日报:需从预防犯罪视角对私人数字货币实施刑法规制
- Crust Network将于1月14日12点开始暂停HTTP版本应用
- SAP License:ERP项目经理需求调研的惨痛经历