Vue组件中router.push()实现编程式导航需按版本区分：Vue3组合式API用useRouter()获取实例后调用，Vue2选项API直接通过this.$router调用，参数支持字符串、路径对象或命名路由对象。
在 Vue 组件的脚本中使用 router.push() 进行编程式导航，核心是通过 Vue Router 的实例 调用该方法。不同 Vue 版本（Vue 2 vs Vue 3）和组合式 API（setup）写法略有差异，下面分场景说明。
Vue 3 + 组合式 API（推荐）
在 setup() 或 script setup 中，需先调用 useRouter() 获取路由实例：
- 确保已正确安装并创建了
router实例（通常在main.js中通过createApp(...).use(router)注入） - 在组件内导入并调用：
import { useRouter } from 'vue-router' - 然后直接调用
router.push()，参数可以是字符串路径、路径对象或命名路由对象
示例：
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到 /user/123
router.push('/user/123')
// 使用路径对象（带查询参数）
router.push({ path: '/search', query: { q: 'vue' } })
// 使用命名路由（推荐，解耦路径字符串）
router.push({ name: 'UserProfile', params: { id: '123' } })
</script>
Vue 2 + Options API
在 Vue 2 的组件选项中，this.$router 是全局注入的路由实例，可直接调用：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 无需额外导入，
this.$router在组件实例中始终可用（前提是已通过Vue.use(VueRouter)安装） - 参数形式与 Vue 3 一致，支持字符串、对象
示例：
export default {
methods: {
goToHome() {
this.$router.push('/')
},
goToUser(id) {
this.$router.push({ name: 'user', params: { id } })
}
}
}
注意：避免常见错误
- 不要在未安装 router 的上下文中调用：比如普通工具函数里直接 import { useRouter } —— 必须在组件的 setup 或实例生命周期内使用
-
命名路由必须已定义：使用
{ name: 'xxx' }时，对应路由配置中必须有name: 'xxx'，否则会报错 -
params 仅在命名路由或 path 为动态路由时生效：若用
{ path: '/user/123', params: {...} }，params 会被忽略；应改用{ name: 'User', params: {...} } - push 是异步方法：它返回一个 Promise，可 await 处理导航完成或失败（例如处理 404 或守卫拒绝）
例如：
await router.push('/admin')
console.log('导航已完成')
跳转后保留当前滚动位置（可选）
如果希望跳转后不自动滚动到顶部，可在路由配置中设置 scrollBehavior，或在 push 时配合 scrollTo 手动控制。但 router.push() 本身不接管滚动逻辑 —— 它只负责路由变更。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
