【vue3|第26期】Vue3 中的 useRoute 与 router.currentRoute.value：选择正确的路由访问方式

Commas.KM

于 2024-08-24 08:45:00 发布

阅读量1.5k

点赞数 21

分类专栏： Vue 文章标签： vue.js 前端 javascript vue router router route 前端路由

本文链接：https://blog.csdn.net/qq_35844043/article/details/141463023

版权

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

日期：2024年8月22日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

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

文章目录

一、前言
二、useRoute函数：专为 Vue3 的 Composition API 设计
- 1、特点
- 2、适用场景
三、router.currentRoute.value：兼容 Vue2 和 Vue3 的选项
- 1、特点
- 2、适用场景
四、联系与区别
五、结语

在这里插入图片描述

一、前言

在 Vue3 中，随着 Composition API 的引入，访问路由信息的方式也发生了变化。本文将探讨 useRoute 函数和 router.currentRoute.value 之间的联系与区别，并帮助你决定在不同场景下应该使用哪一个。

二、useRoute函数：专为 Vue3 的 Composition API 设计

useRoute 是 Vue Router 4 中的一个新特性，它为 Vue3 的开发者提供了一个便捷的方式来访问当前激活的路由对象。这个函数只能在组件的 setup 函数内部调用，并返回一个响应式的路由对象引用。

1、特点

响应式更新：随着路由的变化，useRoute 返回的对象会自动更新。
组合式（Composition API）集成：与 setup 函数和其他组合式（Composition API）功能完美集成。
类型安全：在使用 TypeScript 时，useRoute 提供了更好的类型推断和类型安全。
作用域限制：只能在组件的 setup 函数内部使用。

2、适用场景

当你在使用 Vue3 的 Composition API 并且需要在 setup 函数中访问路由信息时。
当你想要复用逻辑并且利用响应式系统时。
在 TypeScript 项目中，当你需要确保路由信息的类型安全时。

三、router.currentRoute.value：兼容 Vue2 和 Vue3 的选项

router.currentRoute 是 Vue Router 实例的一个属性，它是一个响应式引用，指向当前激活的路由对象。在 Vue3 中，你需要通过 .value 来访问这个引用的实际值。

1、特点

响应式更新：与 useRoute 类似，router.currentRoute.value 也是响应式的。
Options API 兼容：适用于 Vue2 和不使用 setup 函数的 Vue3 项目。
全局访问：可以在任何地方通过访问 Vue Router 实例来获取当前路由信息。

2、适用场景

当你在 Vue2 或者不使用 setup 函数的 Vue3 项目中需要访问路由信息时。
当你需要在全局混入、插件或其他非组件上下文中访问路由信息时。
当你不打算使用组合式（Composition API）并且希望保持传统的选项式（Options API）风格时。

四、联系与区别

useRoute 和 router.currentRoute.value 都可以用来访问当前激活的路由对象，且都是响应式的。然而，它们在使用上有明显的区别：

设计目标：useRoute 是为 Vue 3 的 Composition API 设计的，而 router.currentRoute.value 是为了兼容 Vue 2 和 Vue 3 的 Options API。
使用位置：useRoute 仅限于 setup 函数内部，而 router.currentRoute.value 可以在任何地方通过 Vue Router 实例访问。
类型安全：useRoute 在 TypeScript 中提供了更好的类型支持。