vue：微信单页应用多入口处理

赶时间的可以跳到最后看源代码，看不懂为什么这样写的回头来重新看。

事情要从上个月说起，公司接了个项目，需要做一个微信端的应用，时间是两个月。

由于之前做过一个简单的微信商城，非常鄙视微信页面跳转时的拖沓，所以决定做单页应用，使用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跳转
        }
    })