How can I get query parameters from a URL in Vue.js?

Question

How can I fetch query parameters in Vue.js?

E.g.

http://somesite.com?test=yay

Can’t find a way to fetch or do I need to use pure JS or some library for this?

Warta

Why is this getting down voted? I need it for Vue.js. If there is some vue library or something built in it would be preferred over raw js. – Warta

There is not even close to a duplicate. vue.js is a framework with a specific logic, different from vanila javascript – Personate

How can this be accomplished without vue-router? – Wing

@ConnorLeech not sure why you would want to skip vue-router, since it's designed for Vue. Please use the provided API. – Ingenue

Answer 1

According to the docs of route object, you have access to a $route object from your components, which exposes what you need. In this case

// from your component
console.log(this.$route.query.test) // outputs 'yay'

Personate

Yup! If he is not using vue-router than this would indeed be a duplicate, as he will need to use standard JS methods. – Safeconduct

The problem is that the vue documentation considers coupling components to the router to be undesirable. They recommend passing props but it doesn't seem possible to pass query params dynamically as props. For example in a beforeEach guard doing something like return next({ name: 'login', query:{param1: "foo" }, }); doesn't work. inside the login component the prop param1 is undefined. – Metropolis

Unfortunately this only works for URL query parameters within the hash part (URL fragment), not plain old query parameters like the OP gave as example. Here's the correct answer for the OP, IMHO: https://mcmap.net/q/74540/-read-url-query-param-values-vue-js – Bonar

how about in vuejs 3? – Rota

-bundler.js:220 Uncaught TypeError: Cannot read properties of undefined (reading 'query') at Proxy.button_update (Update.vue:71:31) at _createElementVNode.onCl – Accipiter

The link is now broken. Please consider updating answer with new link v3.router.vuejs.org/api/#route-object-properties – Pearlypearman

Answer 2

Try this code

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

Tropous

Absolute elegant answer. Thanks! Of-course without vue-router. – Suberin

URLSearchParams is a pure javascript approach it's not a vuejs helper. – Tambratamburlaine

@mrded why is this approach better, given that Vue and apparently Vue Router is already used anyway? – Bodega

@Bodega because it's a JS native way and it works everywhere. Vue Router is just an unnecessary abstraction. – Petrinapetrine

Worked on vue CDN => index.html?youParams=xxx – Trifid

This is where I announce to you that some apps are also using SSR (hi Nuxt) and hence, where window is not available. This is indeed a bad approach, nothing elegant here so far. Please use the given APIs provided by Vue's ecosystem. Vue-router is reactive, and comes with several things in mind, if it was created there is a valid reason. It is not a thing done just for fun. I hope nobody is using window.location.href here, otherwise everybody is nuking their SPA. – Ingenue

Notice that if someone changed the router to something other style (for example, use hash router), this answer may failed to get the search parameters. – Stacey

Answer 3

Without vue-router, split the URL

var vm = new Vue({
  ....
  created() {
    let uri = window.location.href.split('?');
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated() {
  },
....

Another solution https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search:

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated() {
  },
....

Franky

Why would you split location.href yourself when there is location.search readily available? developer.mozilla.org/en-US/docs/Web/API/… e.g. var querypairs = window.location.search.substr(1).split('&'); Also splitting the query name-value pairs by '=' will not always work as you can pass named query parameters without value as well; e.g. ?par1=15&par2 Your code would now raise an exception on par2 as splitting by '=' will result in tmp with only 1 element. – Horizontal

Sorry would not throw an exception but you would not catch par2 either. As you basically assign undefined to getVars['par2']. – Horizontal

the GET method is a string (name/value pairs), in the URL – Franky

@Horizontal you are right, I added a validation and I added another solutions. thank you – Franky

The .substring(1) seems to be unnecessary – Goldsmith

What is the use case of avoiding router in vue? Any advantages? – Deach

So far the second one is the best solution if you want to access the current URL query params in a Quasar Boot file :))) – Situs

Answer 4

More detailed answer to help the newbies of VueJS:

• First define your router object, select the mode you seem fit. You can declare your routes inside the routes list.
• Next you would want your main app to know router exists, so declare it inside the main app declaration.
• Lastly the $route instance holds all the information about the current route. The code will console log just the parameter passed in the url. (*Mounted is similar to document.ready, i.e. it's called as soon as the app is ready)

And the code itself:

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

Diggings

For even more clueless newbies: VueRouter isn't included in VueJS core, so you may want to include the VueRouter separately: <script src="https://unpkg.com/vue-router"></script> – Fare

@Diggings Edit your answer and add that information within the post itself. – Dovev

new Vue({ router, ... }) is not valid syntax. – Karate

The script has partial ES6 usage which I think is making things worst for newcomers. Either go full ES6 with the proper variable decleration and arrow functions or use the traditional way. – Orian

@CrescentFresh new Vue({ router, ... }) is shorthand in ES6. In normal javascript is new Vue({ 'router': router, ... }) – Orian

Answer 5

Another way (assuming you are using vue-router), is to map the query param to a prop in your router. Then you can treat it like any other prop in your component code. For example, add this route;

{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

Then in your component you can add the prop as normal;

props: {
  foo: {
    type: String,
    default: null,
  }
},

Then it will be available as this.foo and you can do anything you want with it (like set a watcher, etc.)

Sophisticated

This is great. The missing piece to the puzzle is the initiation. You can do that like this: ` this.$router.push({ name: 'mypage', query: { foo: 'bar' })` – Retrograde

Answer 6

Vue 3 Composition API

(as far as now 2021, vue-router 4)

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

or

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test  

or

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

Angary

FYI to anyone reading this, the first import statement should be import { useRoute } from "vue-router" – Periosteum

I am using the third example. I am trying console.log(useRouter().currentRoute.value.query.test) in the setup() and getting the error: "injection "Symbol([vue-router]: router)" not found. ". I installed vue-router@next and imported the useRouter...any ideas why I get this error? – Zola

@WillyBurb seems like you didn’t inject vue-router to vue. Go back to documentation, search for app.use(router) – Angary

three alternatives with custom imports, instead of simple "this.$route.query.test" – Turtleneck

@VictorGavro "this.$route.query.test" works only with vue2 syntax, the answer is dedicated for people searching for Vue3 Composition API, as mentioned in the title and code comments of my solution – Angary

@Angary thanks very much. It's useful for me. – Cullan

Clean, the first one did the job! – Heaven

Answer 7

As of this date, the correct way according to the dynamic routing docs is:

this.$route.params.yourProperty

instead of

this.$route.query.yourProperty

Retarder

They are not the same thing! You should use query to get the queries from the URL. From the docs: In addition to $route.params, the $route object also exposes other useful information such as $route.query (if there is a query in the URL) – Consistence

Your answer is wrong, this is not the "correct way". To explain a little, with { path: '/user/:id' }, the url /user/123?a=b&c=d will have $route.params == { id: "123" } and $route.query == { a: "b", c: "d" }. – Enrico

a have linked the docs from vue, so if you say im wrong, doc is wrong. – Retarder

I see you misunderstanding something here params means the parameters in your URL like /user/:username. You see that the username is params but query params are alike this /search/?q='new Vue js', As you see, the new Vue js is a query param here. And there is nothing in the document that proves your answer. Please tell me which line of the document you see those? – Jape

At the time the docs where for the 2.x version. You see many people upvoted, so it worked like that at some point. – Retarder

People who upvoted mainly got confused as to params or queries to use. It doesn't mean that it is properly answering the question. The is quite a huge difference between the two as explained in the comments above. Vue's version has nothing to do here. – Ingenue

As of this date, the correct way to write a loop is to use an if statement – Deach

@Deach what are you saying here? – Ingenue

Answer 8

You can use vue-router.I have an example below:

url: www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: '',
  },
  beforeRouteEnter(to, from, next) {
    if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
      next(vm => {
        vm.name = to.query.name;
        vm.lastName = to.query.lastName;
      });
    }
    next();
  }
})

Note: In beforeRouteEnter function we cannot access the component's properties like: this.propertyName.That's why i have pass the vm to next function.It is the recommented way to access the vue instance.Actually the vm it stands for vue instance

Scorpaenoid

In latest Laravel + Vue setup with the link site.com/route?query=test the query param returns undefined when accessed via the to param in the beforeRouteEnter(to, from, next) method. Any ideas why this could be so? – Teleplay

Answer 9

If your url looks something like this:

somesite.com/something/123

Where '123' is a parameter named 'id' (url like /something/:id), try with:

this.$route.params.id

Duffey

This is not a query param. Give a quick read to that one: #35914569 – Ingenue

Answer 10

Here is how to do it if you are using vue-router with vue3 composition api

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

Hubie

You can also use <script setup> and skip the setup() part directly. – Ingenue

Answer 11

On top of the answers here, I recommend that you use the Vue devtools for further debugging.

Given this snippet of code

<template>
  <div>
    {{ showOrNotTheMessage }}
  </div>
</template>

<script>
export default {
  computed: {
    showOrNotTheMessage() {
      return this.$route.query?.lookingforthis
        ? 'Show this message'
        : 'Dont show this message'
    },
  },
}
</script>

This one will mainly display a conditional string as an example.

---

If you want to further debug what you're doing (with either Options or Composition API), you can select the root component in your Vue devtools and then access the whole Vue instance in your console with

$vm0.$route.query

PS: in Vue3, you need to use the following to access the Vue instance via the Devtools.

$vm0.proxy.$route.params.query

That can help you debug your code faster and potentially find cool stuff to play with.

Ingenue

I my case it was $vm0.proxy.$route.params.query – Caius

Answer 12

Example url: http://localhost:9528/#/course/outline/1439990638887137282

Below codes output: 1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

Tractile

Answer 13

one thing to keep in mind if you are using Hash mode then don't use this.$route.params.name only use url search param

Tambratamburlaine

Answer 14

---

Vue 3 Composition :

---

first include you router

import router from '../../router'

then to access the for example the id; use

 router.currentRoute.value.params.id

Caius

Answer 15

Instead of each time you want to call a param you have to call $route then params then your param this.$route.params.parma1, this.$route.params.parma2, this.$route.params.parmaX

Why not doing it in computed:

  computed: {
    params:function () {
      return this.$route.params;
    }

then simply calling it from params is much more readable and easy to use : this.params.parma1, this.params.parma2, this.params.parmaX

Satire