Как выполнить изменения состояния на моей странице Vue.js при переходе назад по истории браузера после использования `pushState`?

Question

Я пишу довольно простую страницу поиска с помощью Vue (мой первый проект real Vue), и у меня настроена следующая ситуация:

1. Когда запрос передается через URL, я анализирую значение из URL, заполняю окно поиска на странице и выполняю поиск. Это работает 100
2. Когда пользователь редактирует текст в окне поиска, после небольшой паузы отладки я выполняю поиск через вызов API, представляю результаты, создаю новый URL из URL текущей страницы + поисковый запрос в качестве параметра запроса и нажимаю на него. в историю браузера, используя window.history.pushState. Это работает 100
3. Когда пользователь нажимает кнопку «Назад», URL-адрес в адресной строке браузера возвращается к предыдущей записи истории (и, следовательно, к предыдущему поисковому запросу), но страница не обновляет ни свое содержимое, ни один из методов Vue. как created или mounted называются. Я понимаю, что это, вероятно, преднамеренно, потому что весь смысл этого API состоит в том, чтобы избежать перезагрузки страницы, но я хотел бы обновить состояние моей страницы, чтобы окно поиска и результаты соответствовали URL-адресу в адресной строке. Я не могу найти способ сделать это. ❌

Я не использую Vue Router, так как не думаю, что он мне нужен. Это одностраничный сайт с таким поиском.

Спасибо!

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, который у меня уже был!