开发微信公众号网页,页面登录成功之后,是禁止再次返回到登录页。
我在页面设置了让禁止跳到登录页,可是在手机上有自带的微信浏览器后退按钮,所以必须要禁止浏览器后退,才能禁止后退到登录页。
刚开始百度,查到了一个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 }