如何在 Vue.js 中获取查询参数？
例如http://somesite.com?test=yay。
找不到获取方法，还是我需要为此使用纯 JS 或某些库？
问问题
422607 次
13 回答
615
根据route object的文档，您可以从您的组件中访问一个$route对象，这会公开您需要的内容。在这种情况下
//from your component
console.log(this.$route.query.test) // outputs 'yay'
于 2016-03-10T12:15:17.570 回答
88
没有vue-route，拆分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() {
},
....
于 2018-01-06T00:01:05.477 回答
53
试试这个代码
var vm = new Vue({
created() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('yourParam')); // true
console.log(urlParams.get('yourParam')); // "MyParam"
},
});
于 2020-10-07T09:46:14.690 回答
47
帮助VueJS新手的更详细答案：
- 首先定义你的路由器对象，选择你觉得合适的模式。您可以在路线列表中声明您的路线。
- 接下来，您希望您的主应用程序知道路由器存在，因此在主应用程序声明中声明它。
- 最后，该
$route实例包含有关当前路线的所有信息。该代码将仅记录在 url 中传递的参数。（*Mounted 类似于document.ready，即应用程序准备就绪后立即调用）
和代码本身：
<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var vm = new Vue({
router,
el: '#app',
mounted: function() {
q = this.$route.query.q
console.log(q)
},
});
于 2017-05-14T07:03:56.107 回答
39
另一种方法（假设您正在使用vue-router）是将查询参数映射到路由器中的道具。然后，您可以像对待组件代码中的任何其他道具一样对待它。比如添加这条路线；
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo }),
}
然后在您的组件中，您可以正常添加道具；
props: {
foo: {
type: String,
default: null,
}
},
然后它将可用this.foo，您可以使用它做任何您想做的事情（例如设置观察者等）
于 2018-09-24T16:03:45.043 回答
18
于 2019-08-13T13:57:56.247 回答
13
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
于 2021-03-20T06:25:49.763 回答
7
如果您的网址看起来像这样：
somesite.com/something/123
其中 '123' 是一个名为 'id' 的参数（像 /something/:id 这样的 URL），请尝试：
this.$route.params.id
于 2020-04-06T14:22:06.763 回答
5
你可以使用 vue-router。我有一个例子如下：
网址： www.example.com?name=john&lastName=doe
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。这就是为什么我传递了vmtonext函数。这是访问 vue 实例的推荐方式。vm实际上它代表 vue 实例
于 2018-04-20T12:59:24.007 回答
3
如果您使用vue-routervue3 组合 API ，请执行以下操作
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
于 2021-05-02T13:50:46.257 回答
1
如果您使用哈希模式，请记住一件事，然后不要使用 this.$route.params.name 仅使用 url 搜索参数
于 2021-09-22T07:19:18.073 回答
0
您可以通过使用此功能获得。
console.log(this.$route.query.test)
于 2020-03-11T12:16:53.730 回答
0
示例网址：http://localhost:9528/#/course/outline/1439990638887137282
下面的代码输出：1439990638887137282
this.courseId = this.$route.params.id
console.log('courseId', this.courseId)
于 2021-09-20T16:36:02.277 回答