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

E.g.

http://somesite.com?test=yay

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


当前回答

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

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

其他回答

试试这段代码

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

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

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

下面是如何做到这一点,如果你正在使用vue-router与ve3组合api

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

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