vue.js - 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...
      }
   }
}