How to get the query string parameters in Vue JS?

In Vue, you can get the query string parameters using the built-in window.location.search property, which returns the query string portion of the current page’s URL. You can then use the URLSearchParams API to parse the query string and extract the parameters.

Here’s an example of how to get the query string parameters in Vue:

<template>
  <div>
    <p>Query parameter value: {{ queryParam }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParam: null,
    };
  },
  mounted() {
    const searchParams = new URLSearchParams(window.location.search);
    this.queryParam = searchParams.get('paramName');
  },
};
</script>

In this example, we’re defining a queryParam data property to store the value of the query parameter. We’re then using the mounted lifecycle hook to parse the query string and extract the value of the paramName query parameter using the URLSearchParams API. We’re then setting the value of queryParam to the extracted value. Finally, we’re using interpolation in the template to display the value of queryParam.

Note that this approach assumes that the query string is present in the current page’s URL. If you need to get the query string parameters from a different URL, you can pass the URL as a string to the URLSearchParams constructor, like this:

const searchParams = new URLSearchParams('http://example.com/path?paramName=value');

This will parse the query string from the specified URL instead of the current page’s URL.