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

Question

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

/post?pid=5e4844e34202d6075e593062

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

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

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

如何解决这个问题？

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

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

Answer 1

试试这个解决方案

.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 2

试试这个：

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

希望有用！！！

Answer 3

假设您有一个组件 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.

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

提供

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

Answer 4

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

而不是尝试使用不同的查询字符串再次推送到同一页面。可以监视查询字符串 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 5

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

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

Answer 6

万一有人在找这个：

指定为字符串的查询参数在传递给 path 参数时不起作用： router.push({path: 'route?query=params'})

当您希望将它们作为字符串使用时，只需将整个字符串作为参数传递，如下所示：router.push('route?query=params')

然后路由器会自动选择它并进行导航。

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

VueJS: $router.push not working with query parameters

query-parameters

vue.js

vue-router

nuxt.js