javascript - 如何使用 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 },
  ]
})

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对于路由器是可选的 - 组件构建 View 的一些附加信息
• 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 .