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


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
  • 组件
  • 查询
  • 动态


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

在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/

往期文章归档:

相关推荐
一名技术极客1 天前
后端开挂:3 行代码写出 8 个接口!
java·api·apijson
Amd7942 天前
Nuxt.js 应用中的 prerender:routes 事件钩子详解
路由·nuxt·seo·钩子·ssg·动态·预渲染
cyt涛2 天前
SpringCloudGateway — 网关路由
java·开发语言·网关·gateway·路由·断言·转发
亿牛云爬虫专家3 天前
动态与静态网站抓取的区别:从抓取策略到性能优化
爬虫·爬虫代理·网站·代理ip·抓取·动态·静态
图王大胜3 天前
Android Framework AMS(10)广播组件分析-1
android·framework·应用·组件·broadcast·ams·广播
Bruce_Liuxiaowei5 天前
构建安全的用户登录API:从请求验证到JWT令牌生成
人工智能·安全·阿里云·架构·大模型·api
weixin_422201305 天前
[Vue warn]: Do not use built-in or reserved HTML elements as component id:
vue·html·组件·重名·name
Cici_ovo6 天前
编程相关学习点——代码内容及结构
python·学习·编程·api
Amd7947 天前
Nuxt.js 应用中的 components:extend 事件钩子详解
vue·生命周期·组件·nuxt·扩展·钩子·动态
tekin7 天前
vscode通过.vscode/launch.json 内置php服务启动thinkphp 应用后无法加载路由解决方法
vscode·json·php·路由·thinkphp·内置服务