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

日期：2024年8月21日

作者：Commas

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

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

1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255

1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 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 变得异常简单：

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

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

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

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

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

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

<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 的项目中更加得心应手地处理动态路由，实现更加灵活和高效的应用开发。

---

参考文章：

• 《Vue Router官方文档》
• 《Vue 组合式 API 常见问答》

---

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

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