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    //    给个默认值true

if (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页面了的，这个过程很快，有时甚至看不到闪烁，可能跟页面的性能和复杂程度有关

随后的操作就没有发现上面的问题了，大家可以试试