[Vuejs]-How to get url query parameters without Vue router?

by

3👍

✅

You can create an URL object by using

const url = new URL(window.location)

This object contains the url search parameters as the variable searchParams.

Access the params like this.

const bar = url.searchParams.get('foo')
👤Friedrich

1👍

URLSearchParams is a good way to do this-

const urlParams = new URLSearchParams(window.location.search);

const param1 = urlParams.get("token")

// Output will be null if there is no query param of named "token"
console.log(param1);

But if you are not using a full URL or using a custom URL to parse params from then you need to create a URL object first of that custom URL and apply search on it. Why? read here.

// Non window URL, then need to create URL object
const queryURL = new URL("https://example.com/over/there?name=ferret&age=11");

// Then apply search on newly created object
const urlParams = new URLSearchParams(queryURL.search);

// Now, console the params,
console.log(urlParams.get("name"), urlParams.get("age"));
👤Neha Soni

Leave a comment