VueJS：$router.push 不使用查询参数

Question

在我的 NuxtJS(v. 2.10.2) 应用程序中，我有一个如下所示的 URL，其中pid是帖子的 id。

/post?pid=5e4844e34202d6075e593062

此 URL 工作正常，并根据传递给pid查询参数的值加载帖子。但是，用户可以通过单击Add Post打开对话框的应用程序栏上的按钮来添加新帖子。一旦用户单击添加，就会向后端服务器发出请求以保存请求。一旦成功，用户将使用 vue 路由器重定向到新帖子，push如下所示

.then(data => {
  if (data) {
    this.$router.push({ path: `/post?pid=${data.id}` });
  }
})

问题是，用户没有被重定向到新帖子，只是pid更新了查询参数。我怀疑 VueJS 不承认这是一个不同的 URL，因此什么都不做。

如何解决这个问题？

更新：作为替代尝试下面的语法，但得到相同的行为。

this.$router.push({ path: "post", query: { pid: data.id } });

Answer 1

假设您有一个post.vue使用/postURL映射的组件。

现在，如果您将用户重定向到/post?pid=13，则post.vue 如果组件已经安装，则不会再次安装，即。当您已经在/post或 时/post?pid=12。

[1] 在这种情况下，您可以在watch上放置route以了解路线是否已更改。

watch: {
 '$route.path': {
   handler (oldUrl, newUrl) {
     let PID = this.$route.query.pid
     // fetch data for this PID from the server.
     // ...
  }
 }
}

或者

[2] 如果组件post.vue映射到某个路由，请说/post.

您还可以使用生命周期 ->beforeRouteUpdate提供vue-router

beforeRouteUpdate (to, from, next) {
  let PID = to.query.pid
  // fetch data for this PID from the server.
  // ...
  next()
}

Answer 2

通过更改方法，可以根据新的查询字符串值更新组件数据。这是如何做到的。

而不是尝试使用不同的查询字符串再次推送到同一页面。可以监视查询字符串pid本身的变化，并且在更新时可以获取新数据并且可以更新组件数据。在 NuxtJS（v. 2.10.2）应用程序中，这可以通过watchQuery. watchQuery是一个 NuxtJS 属性，用于监视查询字符串的更改。一旦检测到更改，就会调用所有组件方法（asyncData、fetch、validate..）。您可以阅读更多内容https://nuxtjs.org/api/pages-watchquery/

至于解决方案，使用新的查询字符串推送到同一页面保持不变。

.then(data => {
  if (data) {
    this.$router.push({ name: 'post', query: { pid: data.id } });
  }
})

但是，在 page.vue 上，数据是从服务器获取的。我们需要添加watchQuery属性。

watchQuery: ["pid"],
async asyncData(context) {
  let response = await context.$axios.$get(
    `http://localhost:8080/find/id/${context.route.query.pid}`
  );
  return { postData: response };
},
data: () => ({
  postData: null
})

现在，每次查询字符串pid发生变化asyncData都会被调用。就是这样。当查询字符串值更改时更新组件数据的简单修复。