vue.js - NuxtJS 更改查询参数并重新加载页面

Question

我的 NuxtJS 应用程序中有一个接受查询参数的路由。我正在尝试实现一种允许用户更改查询参数并重新加载页面的逻辑。

我试过:

// this does not work because I'm already in "mypage" and "push" does not reload the same page
this.$router.push(`/mypage?param1=${value1}&param2=${value2}`)

// same result as above
this.$router.push({ path: '/mypage', query: {param1: value1, param2: value2}})

// this is able to change the query parameters but on reload they are reverted to the originals
this.$router.replace({ query: {param1: value1, param2: value2} })
window.location.reload()

// This reload the page but the query parameters are reverted as well
this.$router.go(`/mypage?param1=${value1}&param2=${value2}`)

有什么建议吗？

Answer 1

您应该使用第二种方法来更新查询参数。

this.$router.push({ path: '/mypage', query: {param1: value1, param2: value2}})

强制重新加载页面确实是一种不好的做法，相反，您应该为您的查询设置观察者或计算者。

例如

  watch: {
    '$route.query'() {
      // do something
    }
  },

如果这对您不起作用，请提供有关您的问题的更多信息。