如何使用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

以下是docs中的示例：

// 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。

Answer 2

实际上你可以像这样推送查询：this.$router.push({query: {plan: 'private'}})

基于：https://github.com/vuejs/vue-router/issues/1631

Answer 3

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

Answer 4

要立即设置/删除多个查询参数，我最终将下面的方法作为我的全局mixins的一部分（this指向vue组件）：

    setQuery(query){
        let obj = Object.assign({}, this.$route.query);

        Object.keys(query).forEach(key => {
            let value = query[key];
            if(value){
                obj[key] = value
            } else {
                delete obj[key]
            }
        })
        this.$router.replace({
            ...this.$router.currentRoute,
            query: obj
        })
    },

    removeQuery(queryNameArray){
        let obj = {}
        queryNameArray.forEach(key => {
            obj[key] = null
        })
        this.setQuery(obj)
    },

Answer 5

无需重新加载页面或刷新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进行测试。