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 的常用跳转写法

支持字符串路径、对象配置两种形式，推荐对象写法，更清晰且支持传参：

• 字符串跳转（无参）：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 或手写带参数的完整路径。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

router.replace 替换当前历史记录

效果等同于 ，跳转后无法通过浏览器“后退”回到上一页：

• 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 结束）

不复杂但容易忽略

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！