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 是后端提供接口,接收前端传递的域名以及路由参数,经后端处理重新合成完成的前端路由。
vue项目微信分享之后路由链接被破坏怎么办的更多相关文章
- vue实现微信分享朋友圈和朋友功能
vue实现微信分享朋友圈和朋友功能 A-A+ haibao 2018-10-25 11 21 6.2 k 百度已收录 前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...
- Vue+Vue-router微信分享功能
在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案. vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn. ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- vue 配置微信分享
参考:https://www.cnblogs.com/goloving/p/9256212.html 1. main.js import WXConfig from '../../assets/js/ ...
- Vue项目的创建、路由、及生命周期钩子
目录 一.Vue项目搭建 1.环境搭建 2.项目的创建 3.pycharm配置并启动vue项目 4.vue项目目录结构分析 5.Vue根据配置重新构建依赖 二.Vue项目创建时发生了什么 三.项目初始 ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目跳转到外部链接
vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...
- vue项目中分享到朋友圈,调用微信接口
虽然微信提供了jssdk,不代表可以点击按钮进行分享到朋友圈,是需要微信自带的浏览器右上角进行分享.手机浏览器需要浏览器支持分享到朋友圈的分享机制. 微信jssdk地址: https://mp.wei ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
随机推荐
- 结构体中string成员的问题
在结构体中定义字符串的成员的时候要注意定义成string有时候,在某些程序中给成员赋值会崩溃,但是不确定到底什么情况会崩溃.运行报错如下: Program received signal SIGSEG ...
- IO 和 NIO 的区别
IO:阻塞IO,面向流:当一个线程调用read() 或 write()时,该线程被阻塞,直到有一些数据被读取,或数据完全写入,该线程在此期间不能再干任何事情了:可以有少量的连接使用非常高的带宽,一次发 ...
- 机器学习进阶-案例实战-图像全景拼接-图像全景拼接(RANSCA) 1.sift.detectAndComputer(获得sift图像关键点) 2.cv2.findHomography(计算单应性矩阵H) 3.cv2.warpPerspective(获得单应性变化后的图像) 4.cv2.line(对关键点位置进行连线画图)
1. sift.detectAndComputer(gray, None) # 计算出图像的关键点和sift特征向量 参数说明:gray表示输入的图片 2.cv2.findHomography(kp ...
- day17-函数装饰器
一.什么是装饰器 装饰器可以让其他函数在不需要做任何代码改变的前提下,增加额外的功能,装饰器的返回值也是一个函数对象.在 Python 中,函数是第一类对象,也就是说,函数可以做为参数传递给另外一个函 ...
- nginx压缩,缓存
https://www.darrenfang.com/2015/01/setting-up-http-cache-and-gzip-with-nginx/ https://www.linuxdashe ...
- Struts2中使用HttpServletRequest和HttpServletResponse
一.非Ioc方式 这种方式主要是利用了com.opensymphony.xwork2.ActionContext类以及org.apache.struts2.ServletActionContext类, ...
- 使用mysqlbinlog恢复指定表
从整库备份的sql文件中导出某个表的sql语句时,vim查找到表的第一条INSERT语句后,按上下换行键计数INSERT语句的条数,然后按n yy复制,退出vim后,再新建一个文件,按p粘贴刚才的n条 ...
- 在page cache中的页,如果当时没有进程read或者write,引用计数到底该为多少
在一次偶然的机会,在研究如何降低pagecache占用的过程中,走查了 invalidate_mapping_pages的代码: 通过调用 __pagevec_lookup 在radix树中收集一部分 ...
- css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-
让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...
- svg-edit和svg中的自定义属性
用svg的码农们肯定知道,在path.rect等元数据中会加入一些自定义属性,保存于数据库,但是用svg-edit编辑器时, 读取的时候,无法读取些这些自定义属性.解决办法:找sanitize.js文 ...