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

Question

我正在将 Vue3 与 vue-router 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对象是最新的原因。

在这种情况下，您应该使用computedprop来获取查询。如果您想观察查询的变化，请使用watch：

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
    }
  }
}