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

Question

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

例如

http://somesite.com?test=yay

找不到获取方法，还是我需要为此使用纯 JS 或某些库？

原文由 Rob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Yerko Palma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不用vue-router，拆分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() {
  },
....

原文由 erajuan 发布，翻译遵循 CC BY-SA 4.0 许可协议