Getting query parameters from a URL is something that we’ve to do often in our Vue.js apps.
In this article, we’ll look at how to get query parameters from a URL in Vue.js.
Get Query Parameters from a URL
With Vue Router, we can get a query parameter in a route component’s URL easily.
For instance, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import HelloWorld from "./views/HelloWorld.vue";
import VueRouter from "vue-router";
const routes = [{ path: "/hello", component: HelloWorld }];
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
render: (h) => h(App),
router
}).$mount("#app");
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
views/HelloWorld.vue
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
name: "",
};
},
mounted() {
this.name = this.$route.query.name;
},
};
</script>
In main.js , we defined the routes that we can load with Vue Router in the routes array.
Then we call Vue.use(VueRouter) so that the dependencies like router-view and extra properties for components are added.
Next, we create the VueRouter instance with the routes .
And we pass the router into the Vue instance object to register the routes.
We get the name query parameter as we did in views/HelloWorld.vue .
this.$router.query.name has the value of the name query parameter.
Therefore, when we go to /#/hello?name=james, we see ‘hi, james’ displayed since we assigned it to this.name .
Another way to get the query string is to pass it in as props.
To do this, we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import HelloWorld from "./views/HelloWorld.vue";
import VueRouter from "vue-router";
const routes = [
{
path: "/hello",
component: HelloWorld,
props: (route) => ({ name: route.query.name })
}
];
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
render: (h) => h(App),
router
}).$mount("#app");
Then we change views/HelloWorld.vue to:
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
name: String,
},
};
</script>
And App.vue stays the same.
The props property is set to a function that takes the route parameter.
And we return an object with the name property set to route.query.name .
In HelloWorld.vue , we register the name prop with the props property and display name directly in the template.
Therefore, when we go to /#/hello?name=james, we see ‘hi, james’ again.
URLSearchParams
If we don’t use Vue Router, then we can get the query parameter with the URLSearchParams constructor.
For instance, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>
components/HelloWorld.vue
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
name: "",
};
},
mounted() {
const urlParams = new URLSearchParams(window.location.search);
this.name = urlParams.get("name");
},
};
</script>
We call the URLSearchParams constructor with window.location.search , which has the query string.
Then we can get the query parameter with the given key with urlParams.get .
We assigned it to this.name so we can use it in the template.
So if we go to /?name=james , we see ‘hi, james’ displayed.
Conclusion
We can get URL parameters within a component with or without Vue Router.
