Javascript 使用“pushState”返回浏览器历史记录时，如何在my Vue.js页面中执行状态更改？

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

当通过URL传入查询时，我解析URL中的值，填充页面中的搜索框并执行搜索。这很有效✅

当用户编辑搜索框中的文本时，在短暂的去盎司暂停后，我通过API调用进行搜索，显示结果，从当前页面URL+搜索查询构造一个新URL作为查询参数，并使用

window.history.pushState

将其推送到浏览器历史记录中。这很有效✅

当用户按下“上一步”按钮时，浏览器地址栏中的URL会变回上一个历史记录条目（因此也会变回上一个搜索查询），但页面不会更新其任何内容，并且不会调用任何Vue方法，如创建的

或装入的
。我知道这可能是故意的，因为这个API的全部目的是避免重新加载页面，但我想更新页面的状态，以便搜索框和结果与地址栏中的URL匹配。我找不到办法。❌
我没有使用Vue路由器，因为我认为我不需要它。这是一个单页网站，上面只有此搜索

谢谢
 多亏了上面的评论，解决这个问题的方法确实是收听
popstate
事件。在我创建的
函数中，我得到了如下代码：

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

当然，这是假设我在调用
pushState
时正在传递状态中的查询，我已经这样做了
 多亏了上面的评论，解决这个问题的方法确实是收听
popstate
事件。在我创建的
函数中，我得到了如下代码：

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

当然，这是假设我在调用
pushState
时正在传递状态中的查询，我已经这样做了
 您需要使用事件。您需要使用事件。