在 Vue 3 的 中结合 Vue Router 实现编程式导航，需先导入并调用 useRouter 获取路由实例，再调用 push（新增历史记录）、replace（替换当前历史项）等方法；二者均返回 Promise，支持链式处理成功或失败逻辑。
在 Vue 3 的 `<script setup>` 中结合 Vue Router 实现编程式导航，核心是用 <strong>useRouter 获取路由实例，再调用其方法（如 <strong>push、<strong>replace、<strong>go）完成跳转。整个过程简洁明确，无需 this 上下文，也不依赖选项式 API。</script>
引入并获取 router 实例
必须先导入 useRouter 钩子，并在组件顶层同步调用，得到可操作的路由实例：
- 只在 `<script setup>` 中使用，不能在普通函数或异步回调里调用（否则会报错“must be called at the top level”）</script>
- 一个组件只需调用一次，返回的
router对象可复用 - 示例代码：
<script setup><br> import { useRouter } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue-router'<br> const router = useRouter()<br></script>
用 push 实现带历史记录的跳转
router.push() 是最常用的导航方式，会在浏览器历史中新增一条记录，支持后退返回：
- 跳转到路径字符串：
router.push('/about') - 跳转到命名路由（推荐，尤其带参数时）：
router.push({ name: 'UserProfile', params: { id: 123 } }) - 携带查询参数：
router.push({ path: '/search', query: { q: 'vue' } })→ 生成/search?q=vue - 注意：如果用了
path，params会被忽略；要传动态路径参数，必须用name或手动拼接path
用 replace 替换当前历史项
router.replace() 不新增历史记录，而是直接替换当前页，适合登录成功后跳首页、表单提交后防重复刷新等场景：
- 效果等同于 `
` - 写法与
push一致，只是方法名不同：router.replace({ name: 'Home' }) - 用户点击浏览器后退按钮时，不会回到被替换的页面
处理跳转后的逻辑与异常
从 Vue Router 3.1.0+ 起，push 和 replace 返回 Promise，可用于链式处理：
- 跳转成功后执行操作：
router.push('/success').then(() => { console.log('已到达') }) - 捕获导航失败（如路由守卫中断、目标不存在）：
.catch(err => { if (err.name !== 'NavigationFailure') throw err }) - 不建议混用回调函数（
onComplete/onAbort）和 Promise，优先用 Promise 更符合现代写法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
