Question

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

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

完整状态
取消状态

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

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

该页面不会重新加载，仅用于获取每个过滤器按钮的特定网址。

如何在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...
      }
   }
}

Answer 2

首先，您应该使用“ $ route.push”更改路线或点击这些方式无需重新加载即可更改路线

之后，您可以使用“页面监视查询”来处理更改路线的事件 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...
      }
    }
  },

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

3 个答案: