如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
当前回答
到目前为止,根据动态路由文档,正确的方式是:
this.$route.params.yourProperty
而不是
this.$route.query.yourProperty
其他回答
没有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
这可以帮助您更快地调试代码,并可能找到很酷的东西来玩。
如果你的url看起来像这样:
somesite.com/something/123
其中'123'是一个名为'id'的参数(url类似/something/:id),尝试使用:
this.$route.params.id
Vue 3组合API
(截至2021年,vue-router 4)
import {useRoute} from "vue-router";
//can use only in setup()
useRoute().query.test
or
//somewhere in your src files
import router from "~/router";
//can use everywhere
router.currentRoute.value.query.test
or
import {useRouter} from "vue-router";
//can use only in setup()
useRouter().currentRoute.value.query.test