Sometimes, we want to get query parameters from a URL with Vue.js and Vue Router.
In this article, we’ll look at how to get query parameters from a URL with Vue.js and Vue Router.
Get Query Parameters from a URL in Vue.js
We can get the query parameters from a URL in Vue with the this.$route.query property.
To get the query parameter foo=bar , we write:
this.$route.query.foo
and we get 'bar' as the value.
This is available assuming we’re using Vue Router in our Vue app.
If we haven’t added it, we can write:
index.html
<script src="https://unpkg.com/vue-router"></script>
index.js
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/page',
name: 'page',
component: PageComponent
}
]
});
const vm = new Vue({
router,
el: '#app',
mounted() {
const q = this.$route.query.q;
console.log(q)
},
});
to get it.
We create the VueRouter instance and pass it into the object we passed into the Vue constructor.
routes has the routes.
Conclusion
We can get the query parameters from a URL in Vue with the this.$route.query property.
