如何在 vue 路由器的查询参数中使用加号而不是 %20 ？

Question

我正在创建一个组件，它将根据用户输入将查询参数附加到当前 url。这是改变url的方法。

submitSearch () {
  this.$router.push({query: {search: this.search ? this.search : undefined}})
},

提交“john doe”会将 url 更改为http://mysite.test?search=john%20doe

如何让它使用 + 代替？预期网址：http://mysite.test?search=john+doe

Answer 1

Edit Vue 3 默认使用“+”，因此您无需再这样做。但如果由于某种原因你需要使用 Vue 2，你可以使用下面的代码。

=========

发现我们可以覆盖 vue-router 默认的查询字符串解析器。

我使用qs作为解析器，如Github 的这个答案所示

const router = new VueRouter({
  mode            : 'history',
  linkActiveClass : 'active',
  stringifyQuery  : query => {
    let result = qs.stringify(query, { format: 'RFC1738' })
    return result ? ('?' + result) : ''
  },
  routes,
})