所属分类:web前端开发
vue禁止返回到上一页的方法:1、通过“npm install vue-prevent-browser-back --save”命令安装“vue-prevent-browser-back”;2、使用“import preventBack from...”方式单独引入;3、通过添加“mixins: [preventBack]”语句实现禁止返回到上一页即可。
本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。
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.js视频教程》
以上就是vue怎么禁止返回到上一页的详细内容,更多请关注zzsucai.com其它相关文章!