Vue 监听浏览器回退按钮

最新推荐文章于 2024-09-12 09:28:55 发布

原创最新推荐文章于 2024-09-12 09:28:55 发布 · 7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该博客讨论了前端路由的实现，特别是使用history.pushState和popstate事件来管理页面状态。当用户点击浏览器的回退按钮时，通过监听popstate事件并自定义goBack方法，可以控制用户回退到特定的页面而不是上一个历史记录。同时，文章还展示了如何在路由切换时更新查询参数。

mounted() {
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL); //这里有没有都无所谓，最好是有以防万一
    window.addEventListener("popstate", this.goBack, false); // 回退时执行goback方法
  }
},
methods: {
  tabEvent(id) {
    this.curTabId = id;
    this.$router.push({
      path: `/group/view/${this.$route.params.id}`,
      query: {
        tabId: id
      }
    });
    history.pushState(null, null, document.URL);
  },
  goBack() {
    this.$router.replace({ path: "/groups" }); //根据其需求，回退到指定地址
   }
},
destroyed() {
 window.removeEventListener("popstate", this.goBack, false);
}