如何替换页面url_vue微信支付url---ios 与 android 差异

【摘要】：微信确认支付合法路径的时候，ios 取 Landing Page， Android 取 Current Page。获取的路径不同，导致微信支付提示URL未注册。

【作者】：星星

【正文】

最近在使用vue 做项目，在微信支付的时候碰到一个坑，在android时总是显示当前页面的URL未注册，如图：

这通常是因为没有在微信支付后台正确配置授权目录的问题。微信支付允许配置3个目录为授权目录，授权目录必须配置到最后一级目录，但是我们原来的项目都能正常支付，并且这个项目在ios也能正常支付。这样就没必要再配置一个授权目录，毕竟允许配置的目录不多。

我们先来看一下我们现有的配置：

我们配置的支付目录是：http://xx.cn/xx/xxx

原来的项目支付页面路径是：http://xx.cn/xx/xxx/xxxxx，这样是能正常支付的。

但是在vue 的单页面系统里，支付页面的路径变成了

http://xx.cn/xx/xxx/xxxx#/xxxxx

原来微信确认支付合法路径的时候，ios 取 Landing Page， Android 取 Current Page。

我们先来了解一下这两个概念：

Current Page：当前页面

Landing Page：当我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面

例如，我们从A入口页面进入，然后点击进入B支付页面，那么Current Page页面就是B支付页面，而Landing Page是A入口页面。

即 ios 认为合法路径的配置应该是 http://xx.cn/xx/xxx，

而 Android 认为合法路径的配置应该是http://xx.cn/xx/xxx/xxxx。

这就导致微信支付合法url认定不一致的问题。既然问题就在于支付页面的前面多了一个斜杠，那么在配置router的时候直接去掉斜杠是否可以呢？

这样在Android情况下，支付页面的路径变成了http://xx.cn/xx/xxx/xxxx#xxxxx这样就能解决ios和Android支付url不一致的问题。但是不行，带有参数的时候，路径会解析不了。那么怎样才能让后面的斜杠被忽略呢？

我们都知道，url带参数的时候是使用“xx.html?xx=xxx”这种形式，"?"后面的字符不会被解析。那么同理，如果这个斜杠在“?”后面，那么微信应该也会忽略它。那么就只要将我们的支付页面路径变成http://xx.cn/xx/xxx/xxxx?#/xxxxx这样就可以让微信忽略这个斜杠。

那么如何给这个"#"前面加上“?”，首先我们先来了解一下，为何链接里会出现"#"。vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，这种情况下就会默认添加一个"#"。

也就是说"#"是 hash 模式。那么看来要在配置里面改这个可能是会比较麻烦了。我们可以试着在页面里面更改路径，比如在支付页面，如果js判断路径中没有"?#"，那么就利用正则替换当前路径的第一个"#"为"?#"，并且跳转到新路径。这样就完美的解决了ios和Android支付url不一致的问题，并且也不需要改支付配置。