vue 移动端禁止浏览器后退，禁止安卓和ios点击后退操作乱跳页面

开发微信公众号网页，页面登录成功之后，是禁止再次返回到登录页。

我在页面设置了让禁止跳到登录页，可是在手机上有自带的微信浏览器后退按钮，所以必须要禁止浏览器后退，才能禁止后退到登录页。

刚开始百度，查到了一个vue禁止浏览器后退的插件：vue-prevent-browser-back

首先，npm i  vue-prevent-browser-back  -save

然后在需要禁止浏览器后退的页面里引入：

 1  Vue.component(Navbar.name, Navbar);
 2   Vue.component(TabItem.name, TabItem);
 3   import preventBack from 'vue-prevent-browser-back';//组件内单独引入
 4   export default {
 5     name: "main",
 6     mixins: [preventBack],//注入
 7     data() {
 8       return {
 9         userId:394,
10         selected:'1',
11         ReSelect:''
12       };
13     },

这个插件是可以禁止浏览器后退，但是它有个问题：就是它把你页面里添加的后退操作也给禁止了。这是肯定不行了。

所以这个插件只适用于单页面没有路由返回跳转的页面。

然后我就用了下面的代码，解决了仅仅是禁止浏览器后退，页面内部的返回无影响。在想要禁止浏览器后退的页面加上下面这段代码：

 

1   mounted(){
2       //防止页面后退
3       history.pushState(null, null, document.URL);
4       window.addEventListener('popstate', function () {
5         history.pushState(null, null, document.URL);
6       });
7       this.getProductBrand(0,'',0);
8 
9     }