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

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

E.g.

http://somesite.com?test=yay

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

当前回答

示例:http://localhost:9528/#/course/outline/1439990638887137282

以下代码输出:1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

其他回答

Vue 3组合API

(截至2021年，vue-router 4)

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

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

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

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

示例:http://localhost:9528/#/course/outline/1439990638887137282

以下代码输出:1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

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

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

推荐文章