useRoute
useRoute 组合式函数返回当前路由。
在 Vue 组件的模板中,你可以使用 $route
访问路由。
示例
在以下示例中,我们通过 useFetch
使用动态页面参数 - slug
- 作为 URL 的一部分来调用 API。
~/pages/[slug\
<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
: 在最终到达当前路由位置之前尝试访问的路由位置
浏览器在发出请求时不会发送 URL 片段(例如 #foo
)。因此,在模板中使用 route.fullPath
可能会触发 hydration 问题,因为这将在客户端包含片段,但在服务器上不会。