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?

• Rob: 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.
• Yerko Palma: There is not even close to a duplicate. vue.js is a framework with a specific logic, different from vanila javascript
• Connor Leech: How can this be accomplished without vue-router?
• kissu: @ConnorLeech not sure why you would want to skip vue-router, since it's designed for Vue. Please use the provided API.

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'

• Jeff: Yup! If he is not using vue-router than this would indeed be a duplicate, as he will need to use standard JS methods.
• hraynaud: 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.
• Marcel: 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: stackoverflow.com/a/52587655/79485
• Nanda Z: how about in vuejs 3?
• CS QGB: -bundler.js:220 Uncaught TypeError: Cannot read properties of undefined (reading 'query') at Proxy.button_update (Update.vue:71:31) at _createElementVNode.onCl

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"
 },
});

• Yamen Ashraf: Absolute elegant answer. Thanks! Of-course without vue-router.
• Muhammad: URLSearchParams is a pure javascript approach it's not a vuejs helper.
• Igor: @mrded why is this approach better, given that Vue and apparently Vue Router is already used anyway?
• mrded: @Igor because it's a JS native way and it works everywhere. Vue Router is just an unnecessary abstraction.
• kissu: 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.

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() {
 },
....

• Arthur: 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.
• Arthur: Sorry would not throw an exception but you would not catch par2 either. As you basically assign undefined to getVars['par2'].
• erajuan: the GET method is a string (name/value pairs), in the URL
• erajuan: @Arthur you are right, I added a validation and I added another solutions. thank you
• Tofandel: The .substring(1) seems to be unnecessary

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)
 },
});

• rustyx: 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>
• Simon Forsberg: @Sabyasachi Edit your answer and add that information within the post itself.
• Crescent Fresh: new Vue({ router, ... }) is not valid syntax.
• Muhyee: 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.
• Muhyee: @CrescentFresh new Vue({ router, ... }) is shorthand in ES6. In normal javascript is new Vue({ 'router': router, ... })

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.)

• slf: 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' })`

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

• nth-child: FYI to anyone reading this, the first import statement should be import { useRoute } from "vue-router"
• St. Jan: 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?
• Alexandr: @WillyBurb seems like you didn’t inject vue-router to vue. Go back to documentation, search for app.use(router)
• Victor Gavro: three alternatives with custom imports, instead of simple "this.$route.query.test"
• Alexandr: @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

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

• hatef: 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)
• phil294: 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" }.
• Marco: a have linked the docs from vue, so if you say im wrong, doc is wrong.
• Iman Shafiei: 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?
• Marco: At the time the docs where for the 2.x version. You see many people upvoted, so it worked like that at some point.

Answer 8

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

• kissu: This is not a query param. Give a quick read to that one: stackoverflow.com/questions/35914069/…

Answer 9

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)
 }
}

• kissu: You can also use <script setup> and skip the setup() part directly.

Answer 10

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

• askepott: 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?

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

enter image description here

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

• Adeel Raza Azeemi: I my case it was $vm0.proxy.$route.params.query

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)

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

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

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

Answer 16

if you don't want to use router and want a one line solution you can write this:

new URL(window.location.toString()).searchParams.get("test")

Answer 17

You can also use the qs library. To use it in your component first install it (npm install qs). Then to use it in your component:

<template>
 <div>
 <p>Test parameter: {{ testParam }}</p>
 </div>
</template>
<script>
import qs from 'qs';
export default {
 data() {
 return {
 testParam: null
 };
 },
 created() {
 const queryParams = qs.parse(window.location.search, {ignoreQueryPrefix: true});
 this.testParam = queryParams.test;
 }
};
</script>

This will parse the current URL and returns an object with the query parameters of the URL.