nuxt添加没有页面的参数，也没有重新加载页面

Question

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

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

• 完成状态

• 取消状态

我想要用户单击完整的URL以更改为

时

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

页面不重新加载，它只是为了获取特定的URL for for for for for foreach filter按钮。

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

Answer 1

您不能使用$route或$router更改URL，它设置了新的HTML5历史记录状态并重新加载页面。因此，要更改URL而不重新加载，历史记录。替代工作。在您的页面或组件中：

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

Answer 2

首先，您应该使用" $ ROUTE.PUSH"更改路线。或单击这些方式在不重新加载的情况下改变路线

之后，您可以使用" watchquery"页面。处理更改路线的事件https://nuxtjs.org/api/pages-watchquery/

Answer 3

首先创建此助手函数

export function getAbsoluteUrl(to) {
  const path = $nuxt.$router.resolve(to).href
  return window.location.origin + path
}

这是我的标签的示例

  watch: {
    tab(value) {
      if (!process.server) {
        const url = getAbsoluteUrl({
          params: { ...this.$route.params, activeTab: value }
        })
        history.replaceState({}, null, url) // or use your own application logic: globalSiteUrl, $route... or queryString some vars...
      }
    }
  },