我在从组件内获取 URL 查询字符串时遇到问题。我正在尝试实现这个https://router.vuejs.org/guide/essentials/passing-props.html#function-mode https://router.vuejs.org/guide/essentials/passing-props.html#function-mode所以我可以将查询作为道具传递。我没有太多使用查询字符串,而且我倾向于使用参数,但在这种情况下我需要查询字符串。我遇到的问题是mounted()
似乎无权访问查询。
以下是我无法工作的基本示例:
URL = http://localhost:8080/?q=This%20is%20my%20query
路由器.js
{
path: '/',
component: () => import('./App.vue'),
props: (route) => ({ query: route.query.q })
}
App.vue(摘录)
<template>
<div id="app">
1.{{ $route.query }}
2.{{ query }}
<searchResults class="results"/>
</div>
</template>
props: ['query'],
mounted () {
console.log(this.query)
console.log(this.$route.query)
},
在上面的代码中,访问相关 URL 时会发生以下情况:
console.log(this.query) = undefined
console.log(this.$route.query) = undefined
在模板中,输出如下:
1.{}
2.
我需要做什么才能正确地将查询作为 prop 传递?