useRoute
useRoute 组合函数返回当前路由。
在 Vue 组件的模板中,你可以通过
$route
访问路由。示例
在下面的示例中,我们通过 useFetch
调用一个接口,使用动态页面参数 slug
作为 URL 的一部分。
~/pages/[slug].vue
<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
:包含路径、查询和哈希的当前路由对应的编码后的 URLhash
:URL 中以 # 开头的解码哈希部分query
:访问路由查询参数matched
:当前路由位置匹配的标准化路由数组meta
:附加到路由记录的自定义数据name
:路由记录的唯一名称path
:URL 编码的路径名部分redirectedFrom
:在最终到达当前路由位置前尝试访问的路由位置