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 lib

Answer 1

You can get By Using this function.

console.log(this.$route.query.test)

Answer 2

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'

Answer 3

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