Nuxt 添加参数无需页面且无需重新加载页面

Question

我有一个包含大量数据列表和一些用于过滤的按钮的页面。

例如按状态过滤的 2 个按钮：

• 完成状态

• 取消状态

我希望当用户单击完整的 url 时将其更改为

http://demo.com/list?filter=complete

页面不会重新加载，它只是为了获取特定的 url foreach 过滤器按钮。

如何在 Nuxt 应用程序中实现代码？

Answer 1

您不能使用$route或$router更改 url，它会设置一个新的 html5 历史状态并重新加载页面。因此，要在不重新加载的情况下更改 url， history.replaceState 可以完成这项工作。在您的页面或组件中：

methods: {
   onClickComplete() {
      if (!process.server) { // I'm not sure it's necessary
         history.replaceState({}, null, window.location + '?filter=complete') // or use your own application logic: globalSiteUrl, $route... or queryString some vars...
      }
   }
}