How to get URL parameters in JavaScript?

Question

I'm using Vue, but I'm not using vue-router.

How can I get URI parameters?

I found one way to get URI by using root el property.

But is there any proper way to get the parameters as I want to send them to backend and get a response from server and display it.

score 6 · Accepted Answer · edited Apr 29 '23 at 16:04

Since you are not using vue-router, I don't think you'll be able to access your params. So your only chance is to use the URL api as:

const url = new URL(window.location.href); 
const getParam = url.searchParams.get('foo');

This will give you the value of foo in ?foo=bar

Alternatively, you can do something like this.

new Vue({
 el: '#app',
 
 data () {
   return {
     params: window.location.href.substr(window.location.href.indexOf('?'))
   }
 },
 
 methods: {
   getParam (p) {
     let param = new URLSearchParams(this.params);
     if(param.has(p)){
       return param.get(p)
     }else{
       false
     }
   }
 },
})

Now, just get the param using getParam('foo')

thank you for the answer. I thought there is any other way around it. — Chirag Chaudhari, Dec 12 '17 at 12:59

score 5 · Answer 2 · edited Apr 29 '23 at 16:08

5

You can get the URL parameters by using window.location.search:

const queryString = window.location.search;
console.log(queryString);
// ?product=troussers&color=black&newuser&size=s

For parsing parameters of the query string, use URLSearchParams:

const urlParams = new URLSearchParams(queryString);

For more info, read this tutorial.

edited Apr 29 '23 at 16:08

InSync

4,851
4
8
30

answered Jul 01 '20 at 12:18

Nancy Brown

360
3
2

That link is unfortunately dead.:/ – Minek Po1 Apr 21 '23 at 17:52
I removed `/m` and now it is no longer dead. – InSync Apr 29 '23 at 16:08

score 0 · Answer 3 · answered Dec 12 '17 at 13:15

We don't use vue router for the moment either. We use the following script to parse args.

    var args = {};

    var argString = window.location.hash;
    //everything after src belongs as part of the url, not to be parsed
    var argsAndSrc = argString.split(/src=/);
    args["src"] = argsAndSrc[1];
    //everything before src is args for this page.
    var argArray = argsAndSrc[0].split("?");
    for (var i = 0; i < argArray.length; i++) {
        var nameVal = argArray[i].split("=");
        //strip the hash
        if (i == 0) {
            var name = nameVal[0];
            nameVal[0] = name.slice(1);
        }
        args[nameVal[0]] = decodeURI(nameVal[1]);
    }

score -2 · Answer 4 · answered Dec 12 '17 at 12:50

-2

Route properties are present in this.$route.

this.$router is the instance of router object which gives the configuration of the router.

You can get the current route query using this.$route.query

answered Dec 12 '17 at 12:50

hannad rehman

4,133
3
33
55

i am not using vue-router. and $route is not present in my case as it is created when using vue router. thats what i am asking is there any way around it. – Chirag Chaudhari Dec 12 '17 at 12:56

How to get URL parameters in JavaScript?

4 Answers4

Linked