vue3中useRouter和useRoute的区别

💡 一则也许对你有用的小广告 🏆

欢迎飞飞程序员   ，你将获得：专属的实战项目（已更新的所有会员标识的项目都能学习） / 1v1 提问 / Java 学习路线 / PHP 学习路线 / 学习打卡 / 社群讨论

正在进行中的项目:《FFBlog知识付费博客项目》 正在持续更新中，基于 Spring Boot 3.x + JDK 21...，[**点击查看**] ;

《从零开发：FFBlog知识付费博客项目（全栈开发）》 演示链接： https://ffblog.ffcxy.com/  ;

截止目前，飞飞  正在疯狂爆肝实战项目，后续还会上新更多项目，目标是将所学知识开发成项目并且分享给大家，如知识付费系统, Ai系统, CMS系统，在线商城系统，等等，欢迎点击围观

在 Vue 3 的 Vue Router 中，useRouter 和 useRoute 是两个不同的组合式 API 函数，它们的作用和返回的对象有本质区别：

1. `useRouter()`

作用：获取 路由实例（Router 对象），用于编程式导航（如跳转路由、前进后退等）。
返回的对象：router（Router 类的实例）

常用方法：

const router = useRouter();

router.push('/home');      // 跳转到指定路径
router.replace('/login');  // 替换当前路由（无历史记录）
router.go(-1);            // 返回上一页
router.back();            // 同 go(-1)
router.forward();         // 同 go(1)

典型场景：
在代码中主动触发路由跳转（如登录后跳转首页）。

2. `useRoute()`

作用：获取 当前路由信息（Route 对象），包含当前路由的路径、参数、查询字符串等。
返回的对象：route（当前路由的响应式对象）

常用属性：

const route = useRoute();

route.path;       // 当前路径（如 "/user/1"）
route.params;     // 动态路由参数（如 { id: "1" }）
route.query;      // 查询参数（如 ?name=foo → { name: "foo" }）
route.hash;       // URL 的 hash 值（如 "#section"）
route.meta;       // 路由元信息（在路由配置中定义的 meta 字段）
route.fullPath;   // 完整路径（包含查询和 hash）

典型场景：
获取当前路由的参数（如从 /user/:id 中提取 id），或根据查询参数（?search=xxx）过滤数据。

核心区别

	`useRouter()`	`useRoute()`
用途	控制路由跳转（主动操作）	获取当前路由信息（被动读取）
类比	导航系统（指挥路线）	GPS 定位（获取当前位置）
是否响应式	否（方法调用）	是（属性可响应式更新）

示例对比

import { useRouter, useRoute } from 'vue-router';

// 编程式导航（主动跳转）
const router = useRouter();
router.push('/user/123'); 

// 获取当前路由信息（响应式）
const route = useRoute();
console.log(route.params.id); // 输出 "123"（假设当前路径是 /user/123）

注意事项

响应式依赖：
route 的属性是响应式的，可以在模板或 computed 中直接使用，而 router 是静态实例。
路由守卫：
在导航守卫（如 beforeEach）中，参数是 to 和 from 路由对象，而非 useRoute 的结果。
组件外使用：
在非组件代码（如 Pinia store）中，需通过 import { router } from '@/router' 直接引用路由实例。