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

【问题标题】：Nuxt add parameters without page and without reload the pageNuxt 添加参数无需页面且无需重新加载页面
【发布时间】：2019-05-10 09:17:13
【问题描述】：

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

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

完成状态
取消状态

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

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

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

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

【问题讨论】：

你能改写你的问题吗？我很乐意提供帮助

标签： vue.js routes nuxt.js

【解决方案1】：

您不能使用$route 或$router 更改网址，它会设置新的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...
      }
   }
}

【讨论】：

【解决方案2】：

首先你应该用“$route.push”改变你的路线或者点击这些方法无需重新加载即可更改路线

之后，您可以使用“pages watchquery”来处理更改路线的事件 https://nuxtjs.org/api/pages-watchquery/

【讨论】：

【解决方案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...
      }
    }
  },

【讨论】：