如何在JavaScript中获取URL参数？

Question

我正在使用Vue，但是 我没有使用vue-router。

我该如何获取URI参数？

我找到了一种通过使用根元素属性来获取URI的方法。

但是有没有合适的方法可以获取我想要的参数，以便将它们发送到后端并从服务器获取响应并显示出来呢？

- Chirag Chaudhari

Answer 1

由于您没有使用vue-router，我认为您将无法访问参数。因此，您唯一的机会是使用URL API，如下：

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

这将会给你在?foo=bar中的foo的值。

---

或者，你可以像这样做。

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

现在，只需使用getParam（'foo'）获取参数即可。

- samayo

---

谢谢你的回答。我以为还有其他方法可以解决它。 - Chirag Chaudhari

Answer 2

你可以使用 window.location.search 获取 URL 参数：

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

如果要解析查询字符串的参数，请使用URLSearchParams：

const urlParams = new URLSearchParams(queryString);

获取更多信息，请阅读此教程。

- Nancy Brown

---

那个链接很不幸已经失效了。:/ - Minek Po1

我移除了“/m”，现在它不再死机了。 - InSync

Answer 3

目前我们也没有使用Vue Router。我们使用以下脚本来解析参数。

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

- bbsimonbb

Answer 4

路由属性存在于this.$route中。

this.$router是路由器对象的实例，它提供了路由器的配置信息。

您可以使用this.$route.query获取当前路由查询。

- hannad rehman

---

我没有使用vue-router。在我的情况下，$route不存在，因为它是在使用vue router时创建的。我的问题是有没有任何解决方法。 - Chirag Chaudhari