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

Question

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

1. 当通过URL传递查询时，我将该值解析出URL，填充页面中的搜索框并执行搜索。 这有效✅
2. 当用户在搜索框中编辑文本时，在短暂的去抖动暂停后，我通过API调用进行搜索，显示结果，从当前页面URL构建新URL +搜索查询作为查询参数并将其推入浏览器使用window.history.pushState历史记录。 这有效✅
3. 当用户按下后退按钮时，浏览器地址栏中的URL会更改回上一个历史记录条目（以及之前的搜索查询），但页面不会更新任何内容，也不会更新任何像created的Vue方法或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的状态下传递查询，我已经这样了！