使用`pushState`后浏览浏览器历史记录时，如何在Vue.js页面中执行状态更改？

Question

我正在用Vue（我的第一个 real Vue项目）编写一个相当简单的搜索页面，并且设置了以下情况：

1. 当通过URL传递查询时，我从URL中解析出值，然后填充页面中的搜索框并执行搜索。 works
2. 当用户在搜索框内编辑文本时，短暂的反跳暂停后，我通过API调用进行搜索，显示结果，从当前页面的URL构建一个新的URL +搜索查询作为查询参数并将其推送window.history.pushState进入浏览器历史记录。 works
3. 当用户按下“后退”按钮时，浏览器地址栏中的URL会变回上一个历史记录条目（因此也会变回上一个搜索查询），但是页面不会更新其任何内容，也不会更新任何Vue方法像created或mounted这样的名称。我知道这可能是故意的，因为此API的全部目的是避免页面重新加载，但是我想更新页面的状态，以便搜索框和结果与地址栏中的URL匹配。我找不到办法。 ❌

我不使用Vue路由器，因为我认为我不需要它。这是一个单页网站，上面只有此搜索。

谢谢！

Answer 1

由于上面的注释中的Slim，解决此问题的方法的确是监听popstate事件。我最终在created函数中使用了类似以下的代码：

var vm = this
window.addEventListener("popstate", function(event) {
  if (event.state) {
    vm.query = event.state.query
  } else {
    vm.query = ""
  }
});

这当然假设我在调用pushState时处于传递状态的查询，而我本来就是这样！