useRouter 是 Vue 3 组合式 API 中用于编程式导航的 Hook，需在 setup 或 中导入并调用，返回 router 实例支持 push、replace 等方法，且必须在已安装 Vue Router 的上下文中使用。
在 Vue 3 组合式 API 中，useRouter 是执行编程式导航的核心工具。它返回一个 路由实例（Router），提供 push、replace、go 等方法，适合在逻辑判断、事件响应或异步操作后控制跳转。
如何正确引入和调用 useRouter
必须在 setup() 或 <script setup></script> 中使用，不能在普通函数或外部直接调用：
- 先导入：
import { useRouter } from 'vue-router' - 再获取实例：
const router = useRouter() - 之后即可调用方法，如
router.push(...)
注意：该 hook 只能在已安装 Vue Router 的应用上下文中使用，否则会报错 “No Router instance found”。
router.push 的常用跳转写法
支持字符串路径、对象配置两种形式，推荐对象写法，更清晰且支持传参：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
字符串跳转（无参）：
router.push('/home') -
命名路由 + params（需路由已配
name和动态段）：router.push({ name: 'User', params: { id: '123' } }) -
路径 + query（查询参数，会显示在 URL 中）：
router.push({ path: '/search', query: { q: 'vue' } }) -
完整路径（含参数）：
router.push('/user/123')—— 此时需确保路由 path 已定义为/user/:id
⚠️ 注意：params 与 path 同时使用时会被忽略，必须配合 name 或手写带参数的完整路径。
router.replace 替换当前历史记录
效果等同于 <router-link replace></router-link>，跳转后无法通过浏览器“后退”回到上一页：
router.replace('/login')router.replace({ name: 'Dashboard' })
适用于登录页跳转、错误页重定向等不需要保留原页面历史的场景。
结合响应式数据和条件跳转
可在事件处理中动态构造跳转目标，例如按钮点击或表单提交后：
- 定义响应式变量：
const userId = ref('456') - 在函数中使用：
router.push({ name: 'UserProfile', params: { id: userId.value } }) - 支持 await：
await router.push(...)—— 返回 Promise，可用于等待导航完成（比如做 loading 结束）
不复杂但容易忽略
