如何在 JavaScript 中獲取 URL 參數？

Question

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

如何獲取 URI 參數？

我找到了一種使用 root el 屬性獲取 URI 的方法。

但是有沒有什么正確的方法來獲取參數，因為我想將它們發送到后端並從服務器獲取響應並顯示它。

Answer 1

由於您沒有使用vue-router ，我認為您無法訪問您的參數。 因此，您唯一的機會是將 URL api 用作：

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

這會給你 foo 在?foo=bar

---

或者，你可以做這樣的事情。

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')獲取參數

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

有關更多信息，請閱讀本教程。

Answer 3

我們暫時也不使用 vue 路由器。 我們使用以下腳本來解析 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]);
    } 

Answer 4

路由屬性存在於this.$route 。

this.$router是路由器對象的實例，它給出了路由器的配置。

您可以使用 this.$route.query 獲取當前路線查詢