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

javascript vue.js vue-router

2022-08-30 01:26:38

在更改输入字段时，我正在尝试使用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 },
  ]
})

答案 1

以下是文档中的示例：

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

编号： https://router.vuejs.org/en/essentials/navigation.html

如这些文档中提到的，工作方式如下router.replacerouter.push

因此，您似乎在有问题的示例代码中拥有它。但我认为您可能还需要包含其中一个或参数，以便路由器有一些路由可以导航到。如果没有或，它看起来不是很有意义。namepathnamepath

这是我现在的理解：

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.idthis.$route.query.q1

答案 2

无需重新加载页面或刷新 dom，即可完成工作。
在组件或其他位置添加此方法以执行此操作：history.pushState

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

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

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

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

使用此方法时要小心！
Vue Router不知道url已经改变，所以它在pushState之后不会反映url。