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)
? ? }
}

来源：https://blog.csdn.net/m0_48232426/article/details/125318562