How can I convert query from a URL in Vue.js to string?

Question

I have this.$route.query in which the object is:

{ next: "/api/o/authorize/?client_id=xxx", nonce: "bee", redirect_uri: "http://X.app.net/oauth/providers/appZ/callback", response_type: "code", scope: "read", state: "123" }

How to convert it to:

/api/o/authorize/?client_id=xxx&nonce=bee&redirect_uri=http://X.app.net/oauth/providers/appZ/callback&response_type=code&scope=read&state=123

Maybe I missed something and there is a method for this in Vue or Js?

That's it's in query means that the whole thing is a query, ?next=/api/o/authorize...&nonce=bee&.... Notice that a path in next needs to be URL encoded. Consider explaining your case. It's unclear why you expect next to become a path. — Estus Flask
– Estus Flask, Commented Jun 9, 2021 at 8:09
You'll probably have to build the URL yourself. Check out URLSearchParams and URL. They should handle all the URL encoding so you don't have to. — Mat
– Mat, Commented Jun 9, 2021 at 8:11

Phil · Accepted Answer · 2021-06-09 08:13:40Z

3

You can pipe plain, single-level objects through URLSearchParams to form correctly encoded query strings.

For example

// just an example to match your Vue code
this.$route = {
  query: { next: "/api/o/authorize/?client_id=xxx", nonce: "bee", redirect_uri: "http://X.app.net/oauth/providers/appZ/callback", response_type: "code", scope: "read", state: "123" }
}

const { next, ...params } = this.$route.query
const url = `${next}&${new URLSearchParams(params)}`

console.log(url)

answered Jun 9, 2021 at 8:13

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-06-09 08:08:19Z

1

Define a computed property called query :

computed:{
  query(){
    let q=this.$route.query;
      return Object.keys(q).map(k=>`${k}=${q[k]}`).join('&').replace("next=","")
  }
}

example in js :

let q={ next: "/api/o/authorize/?client_id=xxx", nonce: "bee", redirect_uri: "http://X.app.net/oauth/providers/appZ/callback", response_type: "code", scope: "read", state: "123" }

let query=Object.keys(q).map(k=>`${k}=${q[k]}`).join('&').replace("next=","")

console.log(query)

answered Jun 9, 2021 at 8:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

How can I convert query from a URL in Vue.js to string?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related