如何在查询参数中使用 plus 而不是 %20 和 vue 路由器？答案

【问题标题】：How to use plus in query params instead of %20 with vue router?如何在查询参数中使用 plus 而不是 %20 和 vue 路由器？
【发布时间】：2020-01-14 03:17:25
【问题描述】：

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

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

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

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

【问题讨论】：

可能有帮助Plus sign in query string
@bpGusar 我不是在谈论 + 到 %2B，而是让 vue-router 将空间编码为 (+) 而不是 %20
为什么有必要使用+ 而不是%20？
为什么在查询字符串中需要完全加号？
只是为了便于阅读，因为 (+) 对用户更友好。

标签： javascript vue.js vue-router

【解决方案1】：

您需要对查询字符串的值部分使用 URI 编码，如下所示：

http://example.com/?param1=(uri-encoded-value)&param2=(uri-encoded-value)&...

您可以使用本机函数 encodeURIComponent 对这些值进行编码。

例子：

const toUrl = (baseUrl = "/", queryObject = {}) => {
  return [
    baseUrl, 
    Object.keys(queryObject).map(k => `${k}=${encodeURIComponent(queryObject[k])}`).join('&')
  ].filter(x => x).join('?')
}

【讨论】：

我们可以使用相同的方法进行解码，使用 decodeURIComponent 函数
这取决于您的使用情况。我不能仅通过您提供的代码片段告诉您。

【解决方案2】：

它进入一个无限循环，一遍又一遍地重定向到 fullPath。设置在 URL 字符串中检查 %20 的条件。

beforeEnter: (to, from, next) => {
if(to.fullPath.includes('%20')) {
  let fullPath = to.fullPath.replace('%20', '+')
  next(fullPath)
} else {
  next()
}
},

【讨论】：

我的 url 中仍然有 %20。

【解决方案3】：

编辑 Vue 3 默认使用 '+'，所以你不再需要这样做了。但是如果由于某种原因需要使用 Vue 2，可以使用下面的代码。

=========

发现我们可以override vue-router default querystring parser。

我正在使用qs 作为解析器，如this answer from Github 所示

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

【讨论】：