useRoute

示例

在下面的示例中，我们通过 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>

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

API

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

• fullPath: 当前路由关联的编码 URL，包含路径、查询和哈希
• hash: 解码的 URL 哈希部分，从#开始
• query: 访问路由查询参数
• matched: 当前路由位置正常化匹配路由记录的数组
• meta: 附加到记录的自定义数据
• name: 路由记录的唯一名称
• path: URL 路径名部分编码
• redirectedFrom: 尝试访问但最终到达当前路由位置的路由位置