vue中监听页面，禁止点击浏览器返回按钮返回

最新推荐文章于 2024-05-20 10:46:58 发布

面对疾风ba

最新推荐文章于 2024-05-20 10:46:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习笔记文章标签： vue

原文链接：https://www.jianshu.com/p/9c8da115ba2e

vue学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在Vue应用中防止用户通过浏览器返回按钮回退到前一页面，通过`mounted`和`destroyed`钩子及自定义`goBack`方法，确保特定页面的交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

某个页面限制用户点击浏览器返回按钮返回

解决方法

在该页面的vue实例中添加mounted destroyed钩子，并且添加goBack方法加以限制

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        history.pushState(null, null, document.URL);
    },
}