2023vue怎么禁止返回到上一页

 所属分类:web前端开发

 浏览:111次-  评论: 0次-  更新时间:2023-01-10
描述:更多教程资料进入php教程获得。 vue禁止返回到上一页的方法:1、通过“npm install vue-prevent-browser-back --save”命令安装“vue-pr...
更多教程资料进入php教程获得。

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其它相关文章!

 标签: vue,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!