通过 100+ 个技巧学习 Nuxt!

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 可能会触发水合问题,因为这将在客户端包含片段,但服务器不包含。
请在 https://router.vuejs.ac.cn/api/#RouteLocationNormalizedLoaded 中阅读更多信息。