赶时间的可以跳到最后看源代码，看不懂为什么这样写的回头来重新看。
事情要从上个月说起，公司接了个项目，需要做一个微信端的应用，时间是两个月。
由于之前做过一个简单的微信商城，非常鄙视微信页面跳转时的拖沓，所以决定做单页应用，使用vue框架来开发。
vue是个不错的框架，加上源码丰富，一路做来还算顺利，没遇到什么特别难的地方。
满以为下周可以顺利上线了，直到要放到微信端的时候出问题了。
客户需要在公众号做一个这样的菜单：
菜单的入口链接到单页应用的不同页面。
而单页应用的内部地址是通过#后面的内容指引router跳转的：
例如跳转到关于我们的页面
http://xxxx.xxx.com/#/about?appid=1&cpid=1
其中appid和cpid是必须的参数，传给单页应用后会赋值给vuex作为全局变量。
但是代码打包发布之后，通过这个地址死活进不去该进的页面，一律进到根目录下。据后端人员反映，经过微信浏览器传到服务器的页面地址，#号连同后面的参数一并丢失。
不是吧
这是个重大bug,如果下周在上线时客户那边不能忽悠过去，他们一定不肯支付尾款，公司可能会炒我鱿鱼，老婆发现下个月工资卡没钱到账，会把家里电脑里的cpu拆了让我跪，我受苦不要紧，可怜了cpu呀！
遂百度之。
十分钟之后，我放弃了。找不到合适的解决方案
也有提出类似问题的
http://www.cnblogs.com/mingxinice/p/mingxin.html
但也没有好的解决方案
还看到一个类似的但是看了半天他也不知道自己怎么解决的。
http://www.jianshu.com/p/a1a31f9da272
或者是可以解决，将router模式改为history,但需要后端做一大堆事的，可这不就违背了前后端分离的真谛了吗？
哎，为了平复我忐忑的心，我心中不禁念起了大悲咒：“南无·喝啰怛那·哆啰夜耶...”
...在电光火石之间，我的心中闪过了一个念头，得到了一个解决办法。
这个办法也许隐世的前端高手也正在使用，但除了这里，你很难百度到，如果对你有帮助，请打赏一下。
如上所述，微信跳转时，浏览器会把#后面的hash值给搞掉，据说在ios中还会在前面加点东西。但是在#之前加的get参数是不会丢失的。
那么我们为什么不能把参数前移呢？像这样：
http://xxxx.xxx.com/?appid=1&cpid=1
页面跳转怎么办？我可以加一个page参数呀
http://xxxx.xxx.com/?appid=1&cpid=1&page=/about
这样写就完全丢弃了#
然后我们通过一个js方法获取链接的参数
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
我把这个方法放到了一个文件中，并作为全局对象引入，当然，你也可以直接放到main.js里
在main.js里,router.beforeEach这个钩子之前，将获得的参数赋值给一个全局对象。
global.browserQuery = {
appid: getQueryString('appid'),
cpid: getQueryString('cpid'),
page: getQueryString('page')
}
在router.beforeEach的钩子里这样写：
router.beforeEach(({ meta, path, query }, from, next) => {
if (browserQuery.appid && browserQuery.cpid) {
store.commit('appid', browserQuery.appid);
store.commit('cpid', browserQuery.cpid);
let p=browserQuery.page;
browserQuery={};
return next(p);
}
///其它代码
})
解释一下，如果browserQuery不是空对象，说明是从外面的链接点击首次进入的，这时候将所需要的参数写进store中，剩下的page是要跳转到的路由，赋值给p变量，然后清空browserQuery对象，使下次跳转不再进入这个条件代码段，然后用return next(p)跳转到该去的页面。
可是一测试，问题又来了。在本地测试（没发布到微信）
链接：http://xxxx.xxx.com/?appid=1&cpid=1&page=/about
还是跳转到根目录，但后面加#/却能正确跳转到about页面
http://xxxx.xxx.com/?appid=1&cpid=1&page=/about#/
为什么呢？唯一的解释是，没有hash值，router没有准备好，所以默认跳转到根目录。但#/会被微信丢掉呀，加了也没用，这不矛盾吗？
能不能跳转两次？先跳到#/,这时router加载了，再跳转到#/about
所以我写成这样
router.beforeEach(({ meta, path, query }, from, next) => {
if (browserQuery.appid && browserQuery.cpid) {
store.commit('appid', browserQuery.appid);
store.commit('cpid', browserQuery.cpid);
delete browserQuery.appid;
return next('/');
}else if(browserQuery.page){
let p=browserQuery.page;
browserQuery={};
return next(p);
}
///其它代码
})
页面进来后，删掉appid,并让它先跳转到根目录'/'，这时appid已经不在，所以不会进入条件一，而会进入else,因为page还在，清空browserQuery,并跳转到该去的页面about,因为跳转前为根目录'/',hash值已在，应当不会出现上述问题。
但一测试，还是不行。
我猜想这个router.beforeEach钩子是不支持这样瞬间跳转两次的。也就是在return next('/') 之后，不会立即执行下一个beforeEach的钩子。
能不能放在router.afterEach里呢？试试！
router.beforeEach(({ meta, path, query }, from, next) => {
if (browserQuery.appid && browserQuery.cpid) {
store.commit('appid', browserQuery.appid);
store.commit('cpid', browserQuery.cpid);
delete browserQuery.appid;
return next('/');
}
///其它代码
})
router.afterEach(route => {
if (browserQuery.page) {
let p = browserQuery.page;
browserQuery = {};
router.push(p);//因为没有next对象，直接调用router跳转
}
})
当router导航到根目录'/'之后，马上跳转到about页面，这时虽然是路由成功，但根目录页面还没有渲染，其实看不出有什么差别。成功了。
对！就这么解决了困扰单页的多入口问题了。
如果你要将其中一个页面分享出去，可以这样组织链接，例如
http://xxxx.xxx.com/?appid=1&cpid=1&page=/detail/1
当其他人点击链接后，会被导航到
http://xxxx.xxx.com/#/detail/1页面
从此你可以告别#的困扰，单页应用从此不再受微信的歧视。
吸了一口维他奶，感叹啊。业界难题被我轻而易举解决了，如果我不当程序员，真实IT界的损失呀。嘻嘻嘻嘻(笑)
全部代码如下：
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
global.browserQuery = {
appid: getQueryString('appid'),
cpid: getQueryString('cpid'),
page: getQueryString('page')
}
router.beforeEach(({ meta, path, query }, from, next) => {
if (browserQuery.appid && browserQuery.cpid) {
store.commit('appid', browserQuery.appid);
store.commit('cpid', browserQuery.cpid);
delete browserQuery.appid;
return next('/');
}
///其它代码
})
router.afterEach(route => {
if (browserQuery.page) {
let p = browserQuery.page;
browserQuery = {};
router.push(p);//因为没有next对象，直接调用router跳转
}
})
