vue中监控浏览器回退 popstate，进行全局路由控制

最新推荐文章于 2024-06-21 09:17:55 发布

A_one2010

最新推荐文章于 2024-06-21 09:17:55 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/A_one2010/article/details/129800373

该代码段实现了一个功能，即在App.vue的mounted阶段监听浏览器的回退事件。通过添加事件监听器捕获popstate事件，当用户点击回退按钮时，使用window.history.pushState和forward方法阻止默认的回退行为，并调用自定义的vm.routerBack()方法。

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

// 这个是监听浏览器回退键的
    returnButton () {
        let vm = this;
        if (window.history && window.history.pushState) {
          window.addEventListener("popstate", function(){
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            vm.routerBack();  //调用方法
          }, false)
        }
        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    },

在app.vue mounted的时候，监控这个回退拿，触发回退后，调用回退事件。