vue阻止页面回退的实现方法(浏览器适用)
作者：m0_48232426
这篇文章主要介绍了vue阻止页面回退的实现方法(浏览器适用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue阻止页面回退的方法
如何阻止页面回退？
VUE中跳转页面后，阻止返回的方法有很多种，这里就不一一列举，我是用vue-prevent-browser-back第三方库来阻止页面返回，这个方法使用起来超级方便。
使用步骤
1.安装
代码如下：
npm install vue-prevent-browser-back --save
2.引入方式
代码如下：
import preventBack from 'vue-prevent-browser-back';//组件内单独引入
3.使用实例
代码如下：
<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>以上介绍了vue-prevent-browser-back的使用，在组件内引入后加入**mixins: [preventBack]**就完成了，是不是比其他方法更简单呢。
vue阻止页面回退（backspace键）
原生js方法
<script language="javascript">
//防止页面后退 使用在vue时 挂载到mounted中
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
</script>vue中结合vuex方法
1.在路由配置中给这个路由添加meta信息，比如:
{
path: '/index',
component: Index,
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', {
allowBack: allowBack
})**这段代码得写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同。
location.href 获取的仍不是to的地址，所以得根据to的信息来拼起来
3.接下来就是最核心的了，在app.vue的mounted里面写onpopstate事件：
window.onpopstate = () => {
if (!this.allowBack) { // 这个allowBack 是存在vuex里面的变量
history.go(1)
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。