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

E.g.

http://somesite.com?test=yay

找不到方法来获取或我需要使用纯JS或一些库为这?


当前回答

根据route object的文档,你可以从你的组件中访问$route对象,它公开了你需要什么。在这种情况下

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

其他回答

如果你的url看起来像这样:

somesite.com/something/123

其中'123'是一个名为'id'的参数(url类似/something/:id),尝试使用:

this.$route.params.id

试试这段代码

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

没有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() {
  },
....

根据route object的文档,你可以从你的组件中访问$route对象,它公开了你需要什么。在这种情况下

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

在这里的答案之上,我建议您使用Vue devtools进行进一步调试。

给出这段代码

<template>
  <div>
    {{ showOrNotTheMessage }}
  </div>
</template>

<script>
export default {
  computed: {
    showOrNotTheMessage() {
      return this.$route.query?.lookingforthis
        ? 'Show this message'
        : 'Dont show this message'
    },
  },
}
</script>

例如,它将主要显示一个条件字符串。


如果你想进一步调试你正在做的事情(使用Options或Composition API),你可以在Vue devtools中选择根组件,然后在控制台中访问整个Vue实例

$vm0.$route.query

PS:在Vue3中,你需要使用以下方法

$vm0.proxy.$route.query

这可以帮助您更快地调试代码,并可能找到很酷的东西来玩。