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

有关更多信息，请阅读本教程。