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，它与/post URL 映射。

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

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

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

或

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

你也可以使用生命周期->vue-router提供的beforeRouteUpdate

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

Answer 2

试试这个解决方案

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

提示：

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

Answer 3

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

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

Answer 4

使用 watchQuery 属性 (https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery)

export default {
  watchQuery: true,
  data: () => ...
}

Answer 5

试试这个：

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

希望有用！！！