如何在Vue.js中获取查询参数?
E.g.
http://somesite.com?test=yay
找不到方法来获取或我需要使用纯JS或一些库为这?
当前回答
下面是如何做到这一点，如果你正在使用vue-router与ve3组合api
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
其他回答
根据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与ve3组合api
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
到目前为止，根据动态路由文档，正确的方式是:
this.$route.params.yourProperty
而不是
this.$route.query.yourProperty
