How to use plus in query params instead of %20 with vue router?

Question

I'm creating a component that will append query param to current url based on user input. This is the method to change the url.

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

Submitting "john doe" will change the url into http://mysite.test?search=john%20doe

How to make it use + instead? expected url: http://mysite.test?search=john+doe

maybe helpful [Plus sign in query string](https://stackoverflow.com/questions/6855624/plus-sign-in-query-string) — bpGusar, Sep 12 '19 at 09:16
@bpGusar I'm not talking about + into %2B, but to make vue-router encode space to (+) instead of %20 — Christhofer Natalius, Sep 12 '19 at 09:19
friendly for who? for users? normal user write query in browser address field or in input? — bpGusar, Sep 12 '19 at 09:28
it doesn't matter is plus sign or is %20, just parse this query string to normal view using functions, like ```encodeURIComponent()```, as in link in comment i poster above — bpGusar, Sep 12 '19 at 09:31
@bpGusar sorry I don't understand, what do you mean by "process the request" — Christhofer Natalius, Sep 12 '19 at 09:36

Christhofer Natalius · Accepted Answer · 2021-12-02T08:35:34.057

Edit Vue 3 uses '+' by default, so you don't need to do this anymore. But if for some reason you need to use Vue 2, you can use the code below.

=========

Found out that we can override vue-router default querystring parser .

I'm using qs for the parser as shown in 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,
})

score 0 · Answer 2 · answered Sep 12 '19 at 09:26

0

You need to use URI encoding for value parts of query strings, like this:

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

You can encode these values using the native function encodeURIComponent.

Example:

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

answered Sep 12 '19 at 09:26

Augusto Escobar

36
10

Same approach can we used for decoding, with decodeURIComponent function – Augusto Escobar Sep 12 '19 at 09:29
It will depend on your usage. I can't tell you just by the code fragment you provided. – Augusto Escobar Sep 12 '19 at 09:30

score -1 · Answer 3 · answered Sep 12 '19 at 09:27

-1

It enters an endless loop redirecting to fullPath over and over. Set a condition that checks for %20 in URL String.

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

answered Sep 12 '19 at 09:27

Tom Marienfeld

716
3
14

I still got %20 in the url. – Christhofer Natalius Sep 12 '19 at 09:35

How to use plus in query params instead of %20 with vue router?

3 Answers3