vue的两种路由方式,hash和history在微信授权和分享中的问题

2,516 阅读2分钟

最近使用vue做了一个微信公众号的项目,在涉及到授权和分享的时候遇到了一些问题,这里做一个记录。

在使用hash模式时,ios和安卓的分享没有问题(传入当前url签名不会报错),但是hash模式有一个弊端,它的链接中会有一个#符号,而前端页面授权需要传入当前页面url,但是这个url微信是禁止带?和&之外的符号,所以不建议使用hash模式。

而使用history模式,授权登录没有问题,但是在ios中分享签名会报错,经过查阅资料后了解到,vue的history模式在ios和安卓中的实现是有一点区别的,在安卓中,路由转换时,是模拟正常页面跳转;而在ios中只是在跳转历史记录里写入,无法模拟正常的页面跳转。而微信分享签名时,必须传入当前的页面url,这就导致了history模式在安卓中分享正常,而在ios中除了进入的第一个页面可以分享,而路由改变过后的页面都无法分享。

history的解决方法:只需要区分开ios和安卓每次分享获取签名的url就可以了,可以直接在加载进入页面的时候判断是否ios终端,然后把当前的url存入缓存,每次分享的时候使用这个url就可以正常分享了。

ps:最后还有一个小坑,我是在App.vue中写的判断终端逻辑,而如果在路由配置中加了重定向,然后首次进入的链接没有,然后走了重定向的话,ios也无法分享,这个初步判断应该是vue的路由重定向执行逻辑的问题。暂时也没有时间去解决,我是和产品说的只向外暴露正常的路由连接,哈哈,没有办法,并且要吐槽一下,微信的坑实在是太多了!