useRoute

useRoute 可组合函数是对 vue-router 中同名可组合函数的封装，用于在 Nuxt 应用中访问当前路由。

关键区别在于，在 Nuxt 中，该可组合函数确保路由仅在导航后的页面内容发生变化后才会更新。相比之下，vue-router 版本会立即更新路由，这可能会导致模板中依赖路由元数据（metadata）的不同部分出现同步问题。

示例

在以下示例中，我们通过 useFetch 调用 API，并将动态页面参数 slug 作为 URL 的一部分。

<script setup lang="ts">
const route = useRoute()
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
</script>

<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

如果你需要访问路由查询参数（例如路径 /test?example=true 中的 example），那么可以使用 useRoute().query 而不是 useRoute().params。

API

除了动态参数和查询参数外，useRoute() 还提供以下与当前路由相关的计算引用：

• fullPath：与当前路由关联的编码后 URL，包含路径、查询字符串和哈希值。
• hash：以 # 开头的 URL 解码后的哈希部分。
• query：访问路由查询参数。
• matched：与当前路由位置匹配的标准化路由数组。
• meta：附加到路由记录的自定义数据。
• name：路由记录的唯一名称。
• path：URL 中编码后的路径名部分。
• redirectedFrom：在最终到达当前路由位置之前，尝试访问的路由位置。

常见陷阱

路由同步问题

务必使用 Nuxt 提供的 useRoute() 可组合函数，而不是 vue-router 中的那个，以避免在页面导航期间出现同步问题。直接从 vue-router 导入 useRoute 会绕过 Nuxt 的实现。

// ❌ do not use `useRoute` from `vue-router`
// @errors: 2300
import { useRoute } from 'vue-router'
// ✅ use Nuxt's `useRoute` composable
import { useRoute } from '#app'

在中间件中调用 useRoute

不建议在中间件中使用 useRoute，因为它可能导致意外行为。在中间件中不存在“当前路由”的概念。useRoute() 可组合函数仅应在 Vue 组件的 setup 函数或 Nuxt 插件中使用。

route.fullPath 的水合（Hydration）问题

浏览器在发起请求时不会发送URL 片段（例如 #foo）。因此，在模板中使用 route.fullPath 可能会引发水合问题，因为这在客户端包含片段，但在服务端则不包含。