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 } });

原文由 Meena Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过更改方法组件数据可以根据新的查询字符串值进行更新。这是如何完成的。

而不是尝试使用不同的查询字符串再次推送到同一页面。可以监视查询字符串 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 将被调用。就是这样。当查询字符串值更改时更新组件数据的简单修复。

原文由 Meena Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

假设您有一个组件 post.vue 映射到 /post URL。

现在，如果您将用户重定向到 /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()
}

原文由 Shivam Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议