Vue2单页应用导致的微信支付安全域名问题

最近vue的单页应用在测试时遇到一个比较严重的问题，在微信内调起微信支付老是报错，排查后发现是安全域名的设置有问题。vue的单页应用有两种模式，hash和history两种，而hash模式下的url是有一个‘#’的，导致唤起微信支付的url不固定。但是微信的一个商户平台只能添加5个安全域名，如果要把它的多种情况都写入明显是不可能的。而history模式是需要后台去配合的。那怎么单纯的前端去解决呢？

// 例如你的url是这样的

test.com/#/

// 唤起微信支付的页面url是这样的

test.com/#/recharge

// 这种情况下唤起微信支付的url会变得不固定。
// 如果刚重定向完成，可能是这样的

test.com/#/
test.com/#/recharge

// 如果退出微信后再进入，唤起微信支付的url又可能变成这样

test.com

简直被搞得晕头转向有没有。
第一种解决方法就是后台配合使用Vue的history模式了，这样url中没有‘#’，看起来也比较美观一点，官网里有详细的教程。vue-router HTML5 History模式
但是有些情况可能后台不能更改，这时候就只能找其他解决方法了。

第二种方法是在‘#’前加一个‘?’。

// 你的链接就变成了这样

test.com/?#/

// (更难看了有没有……)

// 然后H5的安全域名就可以设置为下面一种了

test.com

// 但是需要注意的是，你的首页地址就要变成带‘/?#/’的形式了，因为‘?’是不会默认添加的
// 首页
test.com/?#/

这样就没有问题了，但是url真的变得很难看。。。

PS：看到有一些人说这种方法会导致微信下的‘返回’键直接退出网站，我测试是没有这种情况的，不知道其他版本。再贴一个知乎的相关链接

原文链接：http://blog.csdn.net/qq_25243451/article/details/78872059