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

理查德Itachi2020-03-10

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

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) },