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

Question

我将 Vue3 与 vue-router 4.0.5 一起使用，我遇到了一个问题，即 useRoute() 似乎正确地检索了路线，但路线的查询未定义，即使存在查询也是如此。

对于路径 /search?q=vue 是否期望 searchQuery 等于 vue 但它 returns 未定义。

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

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 prop to get the query. And if you want to observe the changes to the query, use a 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
    }
  }
}

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

Route query is undefined when using useRoute() in setup() for Vue3 and vue-router4(next)

javascript

vue.js

vuejs3

vue-router4