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

Question

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

1. 当通过 URL 传入查询时，我解析出 URL 中的值，填充页面中的搜索框并执行搜索。这行得通 ✅
2. 当用户编辑搜索框的文本时，在短暂的去抖动暂停后，我通过 API 调用进行搜索，呈现结果，从当前页面 URL + 搜索查询构造一个新 URL 作为查询参数，并使用window.history.pushState将其推送到浏览器历史记录中。这行得通 ✅
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时以状态传递查询，我已经是了！