2

我将 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在这个例子中返回未定义。

4

1 回答 1

6

是异步更新的route，您在更新实际发生之前记录它。

当您console.log使用对象时，浏览器会自动更新记录的值以显示最新的值。但是，字符串不是这样，这就是searchQuery字符串undefined在日志中的原因，而route对象是最新的。

在这种情况下，您应该使用computed道具来获取查询。如果您想观察查询的变化，请使用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
    }
  }
}
于 2021-03-18T00:35:35.667 回答