如何从 Vue.js 中的 URL 获取查询参数？

javascript url-parameters vue.js vue-router query-parameters

2022-08-29 23:10:18

如何在 Vue 中获取查询参数.js？

例如：

http://somesite.com?test=yay

找不到获取的方法，或者我需要使用纯JS或一些库来做到这一点吗？

答案 1

根据 route 对象的文档，您可以从组件访问对象，这会公开您需要的内容。在这种情况下$route

//from your component
console.log(this.$route.query.test) // outputs 'yay'

答案 2

如果没有 vue-route，拆分 URL

var vm = new Vue({
  ....
  created() {
    let uri = window.location.href.split('?');
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated() {
  },
....

另一个解决方案 https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search：

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated() {
  },
....