• 技术文章 >web前端 >前端问答

    vue怎么禁止返回到上一页

    藏色散人藏色散人2022-12-30 15:32:32原创180

    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怎么禁止返回到上一页的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:vue能实现自适应吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 聊聊Vue3+hook怎么写弹窗组件更快更高效• 安装vue devtools失败怎么办• vue二级路由报错怎么办• vue能实现自适应吗
    1/1

    PHP中文网