路由实例 useRoute

useRoute

可组合项返回当前路由，必须在 setup 函数、插件或路由中间件中调用。

在 Vue 组件的模板中，您可以使用 $route 访问路由。

示例 Example

在以下示例中，我们使用动态页面参数slug作为 URL 的一部分，通过useFetch调用 API。

<script setup>
const route = useRoute()
const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/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。

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

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