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

E.g.

http://somesite.com?test=yay

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


当前回答

根据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

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

另一种方法(假设您使用vue-router)是将查询参数映射到路由器中的道具。然后,您可以像对待组件代码中的其他道具一样对待它。例如,添加此路由;

{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

然后在你的组件中,你可以像往常一样添加道具;

props: {
  foo: {
    type: String,
    default: null,
  }
},

那么它将以这样的形式出现。Foo,你可以做任何你想做的(像设置一个观察者,等)。

有一件事要记住,如果你正在使用哈希模式,那么不要使用这个

你可以使用vue-router。下面是一个例子:

url: www.example.com ?名字= john&lastName =能源部

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: '',
  },
  beforeRouteEnter(to, from, next) {
    if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
      next(vm => {
        vm.name = to.query.name;
        vm.lastName = to.query.lastName;
      });
    }
    next();
  }
})

注意:在beforeRouteEnter函数中,我们不能访问组件的属性,例如:this.propertyName。这就是为什么我把vm传递给下一个函数。这是访问vue实例的推荐方式。实际上,vm代表vue实例

到目前为止,根据动态路由文档,正确的方式是:

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty