【vue3|第25期】Vue3中的useRoute:轻松访问路由信息

日期:2024年8月21日

作者:Commas

签名:(ง •_•)ง 积跬步以致千里,积小流以成江海......

注释:如果您觉在这里插入代码片有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^

1.01365 = 37.7834;0.99365 = 0.0255

1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面 :本文 vue3 的示例代码,在没有另外声名的情况下,均采用 <script setup> 组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录

  • 一、前言
  • [二、useRoute 的前世今生?](#二、useRoute 的前世今生?)
  • [三、`useRoute` 的属性](#三、useRoute 的属性)
  • [三、实战应用:使用 useRoute 获取路由信息](#三、实战应用:使用 useRoute 获取路由信息)
  • 四、结语


一、前言


Vue3 中,组合式 APIComposition API)提供了一种更加灵活和直观的方式来组织和复用逻辑。其中,useRouteVue Router 4 中的一个强大工具,它允许我们在 setup 函数、语法糖中轻松访问当前路由的信息。本文将详细介绍 useRoute 的用法、属性和方法,并通过实例展示如何在实际项目中应用它。

二、useRoute 的前世今生?


Vue2 中,我们通过 this.$route 来访问路由信息,但到了 Vue3Composition API 的出现使得我们有了更加现代的解决方案 ------ useRoute

useRouteVue Router4(适用于 Vue3)中的一个 Composition API 函数。它提供了一种简洁的方式来访问当前激活路由的状态 ,包括路径、参数、查询参数 等,更符合组合式 API 的方式,提供了一个响应式的 route 对象,使得数据操作更加直观和高效。

另外,通过 useRoute,我们可以避免在组件中直接访问全局的 $route 对象,从而使代码更加模块化和可维护。

三、useRoute 的属性


当我们在组件的 setup 函数中调用 useRoute 时,它会返回一个响应式的 route 对象。这个对象包含了当前路由的各种信息 ,如路径、名称、参数、查询参数等。

  • path:当前路由的路径,如 /about。
  • params:对象,当前路由的参数,例如 { id: '123' }。
  • query:对象,当前路由的查询参数,如 { sort: 'newest' }。
  • fullPath:当前路由的完整路径,包括查询参数。
  • meta:对象,当前路由的元信息。
  • name:当前路由的名称,如果有的话。
  • hash:当前路由的哈希值(带 #)。
  • matched:数组,当前路由匹配的路径段的路由记录。

三、实战应用:使用 useRoute 获取路由信息


Vue3 组件的 <script setup> 标签中,使用 useRoute 变得异常简单:

javascript 复制代码
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

console.log(route.path);      // 输出当前路径
console.log(route.params);    // 输出当前路由参数
console.log(route.query);     // 输出当前路由查询参数
</script>

示例:动态路由与查询参数

假设我们有这样一个路由配置:

javascript 复制代码
const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserComponent,
    // 更多路由配置...
  },
  // 更多路由配置...
];

UserComponent 组件中,我们可以通过 useRoute 来访问动态参数和查询参数:

javascript 复制代码
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

// 动态输出用户 ID
const userId = route.params.id;
console.log("userId:", userId);

// 后续逻辑代码省略...

</script>

通过上述代码,你将能够轻松获取和利用动态参数 :id 的值,从而实现动态渲染组件内容或执行相应逻

更多传参相关知识,可看我的另一篇博客《Vue-Router路由的三种传参方式》

四、结语


useRoute 的出现,不仅简化了我们在 Vue3 中获取和操作当前路由信息的过程,还使得代码变得更加响应式和可维护。掌握 useRoute,你就能在 Vue3 的项目中更加得心应手地处理动态路由,实现更加灵活和高效的应用开发。


参考文章:


版权声明:本文为博主原创文章,如需转载,请给出:

原文链接:https://blog.csdn.net/qq_35844043/article/details/141390994

相关推荐
CoderLiu17 分钟前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说19 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6661 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui