vue阻止页面回退的实现方法(浏览器适用)

npm install vue-prevent-browser-back --save

import preventBack from 'vue-prevent-browser-back';//组件内单独引入

<template>
    <div class="container">
        <div class="container-text">
          <p>禁止返回上级页面！</p>
        </div>
    </div>
</template>
<script>
import preventBack from 'vue-prevent-browser-back';//组件内单独引入
export default {
    name: '',
    props: {},
    mixins: [preventBack],//注入  阻止返回上一页
    components: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>

<script language="javascript">
  //防止页面后退  使用在vue时 挂载到mounted中
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', function () {
     history.pushState(null, null, document.URL);
  });
</script>

{
    path: '/index',
    component: Index,
    meta: {allowBack: false}
}

let allowBack = true    //    给个默认值true
if (to.meta.allowBack !== undefined) {
    allowBack = to.meta.allowBack
}
if (!allowBack) {
      history.pushState(null, null, location.href)
}    
store.dispatch('updateAppSetting', {
    allowBack: allowBack
})

window.onpopstate = () => {
    if (!this.allowBack) {    //    这个allowBack 是存在vuex里面的变量
        history.go(1)
    }
}