title: useRoute 函数的详细介绍与使用示例
date: 2024/7/27
updated: 2024/7/27
author:
cmdragon

excerpt:
摘要：本文介绍了Nuxt.js中useRoute函数的详细用途与示例，展示了如何在组合式API中使用useRoute获取当前路由信息，包括动态参数、查询参数等，并提供了丰富的计算引用说明，如fullPath、hash、matched等，以及如何正确访问查询参数。

categories:

  • 前端开发

tags:

  • Nuxt.js
  • useRoute
  • 路由
  • API
  • 组件
  • 查询
  • 动态

image
image

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

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

一、useRoute 函数的基本作用

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

二、示例展示

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

<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
。

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长
，阅读完整的文章：
https://blog.cmdragon.cn/posts/eb8617e107bf/

往期文章归档：

标签: none

添加新评论