如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
根据route object的文档,你可以从你的组件中访问$route对象,它公开了你需要什么。在这种情况下
//from your component
console.log(this.$route.query.test) // outputs 'yay'
更详细的答案,帮助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)
},
});
没有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() {
},
....
你可以使用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实例
另一种方法(假设您使用vue-router)是将查询参数映射到路由器中的道具。然后,您可以像对待组件代码中的其他道具一样对待它。例如,添加此路由;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo }),
}
然后在你的组件中,你可以像往常一样添加道具;
props: {
foo: {
type: String,
default: null,
}
},
那么它将以这样的形式出现。Foo,你可以做任何你想做的(像设置一个观察者,等)。
到目前为止,根据动态路由文档,正确的方式是:
this.$route.params.yourProperty
而不是
this.$route.query.yourProperty
如果你的url看起来像这样:
somesite.com/something/123
其中'123'是一个名为'id'的参数(url类似/something/:id),尝试使用:
this.$route.params.id
试试这段代码
var vm = new Vue({
created() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('yourParam')); // true
console.log(urlParams.get('yourParam')); // "MyParam"
},
});
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
下面是如何做到这一点,如果你正在使用vue-router与ve3组合api
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
示例:http://localhost:9528/#/course/outline/1439990638887137282
以下代码输出:1439990638887137282
this.courseId = this.$route.params.id
console.log('courseId', this.courseId)
在这里的答案之上,我建议您使用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
这可以帮助您更快地调试代码,并可能找到很酷的东西来玩。