logo cmdragon's Blog

useRoute 函数的详细介绍与使用示例

avatar
cmdragon 渡劫
  2024-07-27 00:00:00   2024-07-27 00:00:00   798 字  3 分钟
image image

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

在nuxt.js开发中，useRoute是一个非常实用的组合函数，它能够帮助我们获取当前路由的各种信息，从而实现更加灵活和动态的页面交互。

一、useRoute 函数的基本作用

useRoute函数的主要作用是返回当前路由的相关信息。在 Vue 组件的模板中，我们可以使用$route来访问路由，但在组合式 API
中，就需要使用useRoute。

二、示例展示

以下是一个使用动态页面参数slug来通过useFetch调用 API 的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

<script>

export default {
  setup() {
    const route = useRoute();
    const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`);
    return {
      mountain
    };
  }
};
</script>

在上述示例中，通过useRoute获取到当前路由的params中的slug值，然后将其拼接到 API 路径中，使用useFetch获取数据并在页面中展示。

三、useRoute 提供的计算引用

除了动态参数和查询参数，useRoute还提供了以下丰富的计算引用：

  1. fullPath：这是与当前路由关联的编码 URL，包含路径、查询和哈希。例如，如果当前 URL
    是https://example.com/page?param=value#hash，那么 fullPath将是完整的这个字符串。
  2. hash：获取 URL 中以#开头的解码哈希部分。
  3. matched：这是与当前路由位置匹配的规范化的匹配路由数组。
  4. meta：可以用于附加到路由记录的自定义数据。
  5. name：路由记录的唯一名称。
  6. path：获取 URL 中编码的路径名部分。
  7. redirectedFrom：记录在到达当前路由位置之前尝试访问的路由位置。

四、查询参数的获取

如果您需要访问路由的查询参数（例如在路径/test?example=true中的example），那么可以使用useRoute().query
而不是useRoute().params。

往期文章归档：

useRoute 函数的详细介绍与使用示例
posts/eb8617e107bf/
作者
cmdragon
发布于
2024-07-27 00:00
许可
  1. 1. 一、useRoute 函数的基本作用
  2. 2. 二、示例展示
  3. 3. 三、useRoute 提供的计算引用
  4. 4. 四、查询参数的获取
  5. 5. 往期文章归档：
  1. 1. 一、useRoute 函数的基本作用
  2. 2. 二、示例展示
  3. 3. 三、useRoute 提供的计算引用
  4. 4. 四、查询参数的获取
  5. 5. 往期文章归档：