vuejs 运行 在浏览器中单击后退按钮后的功能

Question

我在我的 vuejs 页面中加载了一个组件，该组件仅在按下某个按钮后才可见。但是如果用户没有使用浏览器的后退按钮，它不会关闭我的组件并使“原始”组件可见，它会返回到之前的页面。

我需要防止这种行为。 我想做的是：

1. 停止“返回”操作
2. 运行 函数代替

我已经尝试了以下方法，当有人在浏览器中单击“后退按钮”时它会运行该功能，但它不会阻止“返回操作”。

mounted() {
    window.onpopstate = () => {
      this.closeDetailedView()
    }
  },

closeDetailedView 函数执行以下操作：

closeDetailedView() {
  this.$emit('closeDetailedView')
},

有人可以帮助我吗？

谢谢

Answer 1

您可以使用事件侦听器做您想做的事，并使用 history.pushState 将状态“覆盖”为您当前的状态！

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

事件侦听器将检测用户何时单击按钮。

如果您想保留当前代码

window.onpopstate = () => {
  history.pushState(null, null, document.URL);
  this.closeDetailedView();
}