如何使用 Vue-Router 在 Vue 中设置 URL 查询参数

Question

我正在尝试在更改输入字段时使用 Vue-router 设置查询参数，我不想导航到其他页面，而只想在同一页面上修改 url 查询参数，我这样做是这样的：

this.$router.replace({ query: { q1: "q1" } })

但这也会刷新页面并将y位置设置为0，即滚动到页面顶部。这是设置 URL 查询参数的正确方法还是有更好的方法。

---

编辑：

这是我的路由器代码：

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    .......
    { path: '/user/:id', component: UserView },
  ]
})

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

Answer 1

这是文档中的示例：

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

参考： https ://router.vuejs.org/en/essentials/navigation.html

如那些文档中所述， router.replace 工作方式类似于 router.push

因此，您似乎在有问题的示例代码中正确使用了它。但我认为您可能还需要包含 name 或 path 参数，以便路由器有一些路由可以导航到。没有 name 或 path ，它看起来没有多大意义。

这是我现在的理解：

• query 对于路由器是可选的 - 组件构建视图的一些附加信息

• name 或 path 是强制性的 - 它决定在您的 <router-view> 中显示什么组件。

这可能是您的示例代码中缺少的东西。

编辑：评论后的其他详细信息

在这种情况下，您是否尝试过使用 命名路由？你有动态路由，单独提供参数和查询更容易：

 routes: [
 { name: 'user-view', path: '/user/:id', component: UserView },
 // other routes
 ]

然后在你的方法中：

 this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

从技术上讲，上面和 this.$router.replace({path: "/user/123", query:{q1: "q1"}}) 之间没有区别，但是在命名路由上提供动态参数比提供动态参数更容易组成路由字符串。但在任何一种情况下，都应考虑查询参数。无论哪种情况，我都找不到处理查询参数的方式有任何问题。

在您进入路线后，您可以获取动态参数 this.$route.params.id 和查询参数 this.$route.query.q1 。

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

无需重新加载 页面或刷新 dom， history.pushState 就可以完成这项工作。

在您的组件或其他地方添加此方法来执行此操作：

 addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

因此，在您的组件中的任何位置，调用 addParamsToLocation({foo: 'bar'}) 以在 window.history 堆栈中推送带有查询参数的当前位置。

要将查询参数添加到当前位置 而不推送新的历史 条目，请改用 history.replaceState 。

使用 Vue 2.6.10 和 Nuxt 2.8.1 进行测试。

小心使用此方法！

Vue Router 不知道 url 已经改变，所以它在 pushState 之后不反映 url。

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