日期：2024年8月21日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海......
注释：如果您觉
在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^1.01^365^ = 37.7834；0.99^365^ = 0.0255
1.02^365^ = 1377.4083；0.98^365^ = 0.0006
说在最前面 ：本文vue3的示例代码，在没有另外声名的情况下，均采用<script setup>组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- [二、useRoute 的前世今生？](#二、useRoute 的前世今生？)
- [三、`useRoute` 的属性](#三、
useRoute的属性) - [三、实战应用：使用 useRoute 获取路由信息](#三、实战应用：使用 useRoute 获取路由信息)
- 四、结语
一、前言
在 Vue3 中，组合式 API（Composition API）提供了一种更加灵活和直观的方式来组织和复用逻辑。其中，useRoute 是 Vue Router 4 中的一个强大工具，它允许我们在 setup 函数、语法糖中轻松访问当前路由的信息。本文将详细介绍 useRoute 的用法、属性和方法，并通过实例展示如何在实际项目中应用它。
二、useRoute 的前世今生？
在 Vue2 中，我们通过 this.$route 来访问路由信息，但到了 Vue3，Composition API 的出现使得我们有了更加现代的解决方案 ------ useRoute。
useRoute 是 Vue 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