How to Get the Search Parameters from the Current URL using Custom JS function in Vue JS

In this tutorial we will learn how to get the search parameters from the current URL with the help of custom javascript in Vue JS.

Here we will use javascript function to get the search request data from the url.

function getSearchParams(name) {
      var q = window.location.search.substring(1);
      if (q) {
        let p = q.split(`${name}=`);
        return p.length > 1 ? p[1].split("&")[0] : false;
      }
      return false;
    }

Lets see the below example in which we learn how to get the search parameters from the current URL using custome JavaScript in Vue JS.

Read also - How to Get the Search Parameters from the Current URL in Vue JS

Step 1- Create a view component.

Step 2- In the second step, simply paste the following code in your view component.

<template lang="">
    <div>
        <h1>User Information</h1>
        <h2>Name : {{getSearchParams('name')}}  </h2>      
        <h2>Age : {{getSearchParams('age')}}  </h2>      
        <h2>City : {{getSearchParams('city')}}  </h2>      
    </div>
</template>
<script>
export default {
  methods: {
    getSearchParams: function(name) {
      var q = window.location.search.substring(1);
      if (q) {
        let p = q.split(`${name}=`);
        return p.length > 1 ? p[1].split("&")[0] : false;
      }
      return false;
    },
  },
};
</script>

Step 3- Now, start the npm server

Output -