useRoute
useRoute 组合式函数用于返回当前的路由信息。
在 Vue 组件的模板中，你可以使用
$route 来访问当前路由。示例
在以下示例中，我们通过 useFetch 调用一个 API，并使用动态页面参数 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: 与当前路由关联的编码 URL，包含路径、查询参数和哈希hash: URL 中以#开头的解码后的哈希部分query: 路由的查询参数对象matched: 当前路由匹配到的标准化路由数组meta: 附加在路由记录上的自定义数据name: 路由记录的唯一名称path: URL 中的编码路径名部分redirectedFrom: 在跳转到当前路由前试图访问的路由地址
浏览器在发送请求时不会包含 URL 片段（例如
#foo）。因此在模板中使用 route.fullPath 可能会导致服务端和客户端的 hydration 不一致问题，因为客户端包含 fragment，而服务端没有。