赶时间的可以跳到最后看源代码,看不懂为什么这样写的回头来重新看。
事情要从上个月说起,公司接了个项目,需要做一个微信端的应用,时间是两个月。
由于之前做过一个简单的微信商城,非常鄙视微信页面跳转时的拖沓,所以决定做单页应用,使用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跳转
}
})