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>

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

API

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

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