vue单页应用阻止浏览器后退？

Question

web app 单页应用，是用vue vue-router写的。

有些页面是需要禁止后退的，我把当前页面是否能后退写在了路由元信息meta里面，比如为allowBack。

查到资料 禁止后退的方法是 
history.pushState(null, null, location.href)

之前项目用的是vue1.0，解决方法是

1. 在全局的router.beforeEach 里面 判断当前路由的handler里面的allowBack变量是否为false
2. 如果为false 则 history.pushState(null, null, location.href)

现在改用vue2.0， 原来的方法不好使了，

现在的问题是，不知道该把 history.pushState(null, null, location.href) 这段代码放在哪 
或者说 各位大神 有没有什么其他的解决方案？ 谢谢！！

---

其实主要的使用场景是这样的， 
tabbar点击切换到不同的页面，假如我现在在a页面，点击tabbar到b页面，我不能通过返回键回到a页面，但是能通过点击tabbar去到a页面 

Answer 1

今天一搜 网上看到好几篇复制这个答案发的贴子或者文章，出于我个人的思考 我觉得我还是要表个态（觉得我矫情也好较真也好 略略略~）1.其实这个答案并不好，甚至是有问题的，2.而且这个方案 并不是我一个人的成果，然而我之前的回答并没有说明，啰嗦一下。。以前去网上搜某种解决方案，发现铺天盖地的都是一样的文章。回去一试，发现是有问题的。。。那种心情。。。所以也不希望自己的答案带来这种影响。。自问自答.....需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换整理一下解决方法 和 使用方法：1.在路由配置中给这个路由添加meta信息，比如:{    path: '/home',    component: xxx,    meta: {allowBack: false}}2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值，如：let allowBack = true    //    给个默认值trueif (to.meta.allowBack !== undefined) {    allowBack = to.meta.allowBack}if (!allowBack) {      history.pushState(null, null, location.href)}    store.dispatch('updateAppSetting', {     //   updateAppSetting 只是store里面的一个action， 用来改变store里的allowBack的值的，具体怎么改这个值 要根据各位的实际情况而定    allowBack: allowBack})这段代码得写在next()的后面3.接下来就是最核心的了，在app.vue的mounted里面写onpopstate事件：window.onpopstate = () => {    if (!this.allowBack) {    //    这个allowBack 是存在vuex里面的变量        history.go(1)    }}最后： 这个不是一个完美方法，在网页上初次会有闪烁，但对于嵌入原生app的网页，就我经过的项目来说还是可以用的。看评论有很多人不成功，不知道是报错还是没有效果，我已经写得很清楚，实在想不出还有啥能写的了，抱歉了各位再补充：关于上面提到的初次闪烁，刚刚又去验证了一下：在a页面刷新（beforeRouteEnter 中打印 a）， // 这里log 打印了一个a跳转到b页面（beforeRouteEnter 中打印 b，b页面allowBack 为false）, // log 打印 b点击返回键， // 此时log又打印了一个了a和一个b，但是页面还是回到b页面了的，这个过程很快，有时甚至看不到闪烁，可能跟页面的性能和复杂程度有关随后的操作就没有发现上面的问题了，大家可以试试