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

news2024/9/21 1:44:44

日期：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 获取路由信息
- 示例：动态路由与查询参数
四、结语

在这里插入图片描述

一、前言

在 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>