在Vue3和vue-router4(下一步)的setup()中使用useRoute()时，路由查询未定义

Question

我正在将Vue3与vue路由器4.0.5一起使用，我遇到了一个问题，即useRoute((似乎可以正确地重新设置路由，但路由的查询未定义，即使存在查询。

对于路径/search?q=vue，预期searchQuery等于vue，但返回未定义。

在模板中，{{ $route.query.q }}正确地返回查询值。

import { useRoute } from "vue-router"
export default {
name: "Search",
setup() {
const route = useRoute()
const searchQuery = route.query.q
console.log(route)
console.log(searchQuery)
return {
searchQuery
}
}
}

<template>
<div>{{ $route.query.q }}</div>
</template>

当登录到控制台时，route对象会被正确记录，并包含路由的查询对象，但searchQuery未定义。

我想知道为什么searchQuery在本例中返回为未定义。

Answer 1

route是异步更新的，并且在实际发生更新之前将其记录下来。

console.log对象时，浏览器会自动更新记录的值以显示最新值。但是，字符串的情况并非如此，这就是为什么searchQuery字符串在日志中是undefined，而route对象是最新的。

在这种情况下，应该使用computed道具来获取查询。如果你想观察查询的变化，可以使用手表：

import { computed, watch } from 'vue'
export default {
setup() {
const route = useRoute()
const searchQuery = computed(() => route.query.q)
watch(searchQuery, newSearchQuery => console.log(newSearchQuery))
return {
searchQuery
}
}
}