Query params in vuejs

I'm confused about how to implement query params and how to react to them. I want to set up a vuejs route like this:

{
    path: '/home/video/usertype?=usertypehere',
    name: 'videochat',
    component: VideoChat
  },

and then when the page is loaded, grab the user type in the view and make changes to it based on the URL. I have 2 questions I need help with please:

A: Is this the right way to set up the URL B: How would I grab that query param and use it in the Vue component?

piljac1

5 years ago

Level 28

A: I'm not sure if there are special caveats for query params in Vue Router, as I've used it once and it was like a year ago in a Udemy course section, but the typical query param usage is wrong it your case. It should be :

'/home/video?usertype=usertypehere'

B: You can use the URLSearchParams interface inside a computed property :

userType() {
  // You can also define this in a data property inside the mounted lifecycle hook if you need to reuse it elsewhere
  let searchParams = new URLSearchParams(window.location.search);

  return searchParams.get('usertype');
},

MaverickChan

5 years ago

Level 47

not a good way vue router has a query object

you can grab it using

this.$route.query

piljac1

5 years ago

Level 28

@maverickchan Good to know !

piljac1

5 years ago

Level 28

So I checked out Vue Router's documentation real quick, and for query params, you can use the following syntax (to pass query params to your defined route).

{
    path: '/home/video',
    name: 'videochat',
    component: VideoChat
},

<router-link :to="{ name: 'videochat', params: { usertype: yourUserType }}">Video chat</router-link>

And then, like @maverickchan said, you can use this.$route.query.usertype in your component to retrieve the value.

1 like

Please or to participate in this conversation.