日期：2024年8月22日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 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 中提供了更好的类型支持。
五、结语
在选择 useRoute 还是 router.currentRoute.value 时，你应该考虑以下因素：
- 你的项目是基于
Vue2还是Vue3？ - 你是否在使用
Vue3的Composition API？ - 你是否需要类型安全的路由信息？
理解这些因素，将能帮助你做出最佳的选择，以便在不同的项目和团队环境中有效地访问路由信息。
参考文章：
- 《Vue Router官方文档》
- 《Vue.js 选项式 API》
- 《Vue.js 组合式 API》
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141463023
