Vue2.0组织浏览器返回事件

Prevent Browser Back for Vue2.0

模拟阻止（适用于PC，移动端）：在需要阻止浏览器返回上一页的页面使用次插件，当点击浏览器返回上一页时使页面不做任何变化。

Install

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

Usage

在需要阻止的页面单独引入，然后注入.

<template>
    <div>
    </div>
</template>
<script>
    import preventBack from 'vue-prevent-browser-back';//组件内单独引入
    export default {
        mixins: [preventBack],//注入
        data() {
            return {};
        }
    };
</script>

上面操作就OK了

附vue-prevent-browser-back 文件代码如下

const preventBack = {
    methods:{
        prevent_back(){
            let path = this.$route.fullPath;
            // 判断是否开启了后端支持
            if(this.$router.mode=='hash'){
                path = '#'+path;
            }
            window.pushStateFun = function(){
                let state = { 
                    title: null, 
                    url: path//要禁掉的页面
                }; 
                /* 
                    三个参数：
                    state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
                    title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
                    url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
                */
                window.history.pushState(state,null, path); //要禁掉的页面
            }
            var state = { 
                title: null, 
                url: path//要禁掉的页面
            }; 
            window.history.pushState(state, null, path); //要禁掉的页面
            window.addEventListener("popstate", window.pushStateFun, false);
        }
    },
    mounted() {
        // 判断组件是否有缓存
        if (this.$vnode && this.$vnode.data.keepAlive) {
            // if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
                // console.log('有缓存')
            // }
            return;
        }else{
            this.prevent_back();
        }
    },
    activated(){
        this.prevent_back();
    },
    beforeRouteLeave(to, from, next) {
        window.removeEventListener("popstate", window.pushStateFun, false);
        next();
    }
};
export default preventBack;