如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
当前回答
试试这段代码
var vm = new Vue({
created() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('yourParam')); // true
console.log(urlParams.get('yourParam')); // "MyParam"
},
});
其他回答
示例:http://localhost:9528/#/course/outline/1439990638887137282
以下代码输出:1439990638887137282
this.courseId = this.$route.params.id
console.log('courseId', this.courseId)
试试这段代码
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 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
这可以帮助您更快地调试代码，并可能找到很酷的东西来玩。
更详细的答案，帮助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)
},
});
有一件事要记住，如果你正在使用哈希模式，那么不要使用这个
