Accessing Query Parameters in Vue.js

In web development, query parameters are used to pass data from one page to another through URLs. In Vue.js, accessing these parameters is crucial for building dynamic and interactive applications. This tutorial will cover the different ways to retrieve query parameters in a Vue.js application.

Using the $route Object

When using Vue Router, you have access to a $route object that contains information about the current route, including query parameters. You can access the query parameters using this.$route.query.

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

This method is straightforward and convenient when you’re already using Vue Router.

Using URLSearchParams

Another way to retrieve query parameters is by using the URLSearchParams API, which allows you to parse the query string of a URL. You can use it in combination with window.location.search to get the query parameters.

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

This method is useful when you’re not using Vue Router or need to access query parameters outside of a route.

Manual Parsing

If you prefer not to use any external APIs or libraries, you can manually parse the URL query string. This involves splitting the URL by the ? character and then iterating over the query parameters.

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

While this method works, it’s generally recommended to use one of the above methods for simplicity and readability.

Using Vue Router with Props

If you’re using Vue Router, you can also map query parameters to props in your route configuration. This allows you to treat query parameters like any other prop in your component code.

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

Then, in your component:

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

This method provides a clean and declarative way to handle query parameters.

In conclusion, accessing query parameters in Vue.js can be achieved through various methods, each with its own strengths and use cases. By choosing the right approach for your application, you can build dynamic and interactive web applications that respond to user input.