javascript - vuejs 的路由历史记录

Question

我有一条路线:https://localhost/search/ .我没有在 vuejs 客户端的路由参数中使用搜索参数。请求被发送到一个 api 端点，它作为搜索文本和 page_no 作为参数发送，它为我提供了结果。我在浏览器上来回查看用于发送请求的 page_no 参数。但问题是，当搜索文本发生变化时，我如何从浏览器返回特定的搜索文本。我也想过在前端路由中提供搜索文本，但我想避免这种情况。

Answer 1

当您导航到新的搜索结果时，您应该自己调用 pushState。因为如果目标路由与当前路由相同，vue-router 将不会推送另一个状态。然后您需要处理 onpopstate 事件来更新您的 SearchComponet。

window.onpopstate = function(event) {
      alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };

history.pushState({query: "a"}, null);

pushState 的第一个参数是状态对象——状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史条目相关联。每当用户导航到新状态时，都会触发 popstate 事件，并且该事件的 state 属性包含历史记录条目的状态对象的副本。