vue路由之间是怎么跳转的？有哪些方式？

在 Vue（尤其是 Vue 3 + Vue Router）中，路由跳转是实现页面切换的核心机制。Vue 路由跳转通常发生在单页应用（SPA）中，不会重新加载页面，而是通过 vue-router 实现视图组件的切换。

一、Vue 中路由跳转的方式

编程式导航（JavaScript 中使用 $router）

// 基于路径跳转

this.$router.push('/home')

// 跳转到命名路由

this.$router.push({ name: 'user', params: { id: 123 } })

// 跳转并附带查询参数（URL 中显示为 ?）

this.$router.push({ path: '/search', query: { key: 'vue' } })

注意：使用 params 跳转时，路由必须有 :id 等动态参数；否则推荐用 query。

声明式导航（在模板中使用）

首页

用户详情

搜索

重定向跳转（路由配置中定义）

// router/index.js

{

path: '/',

redirect: '/home'

}

返回上一个页面 / 前进或后退

// 返回上一页（浏览器后退）

this.$router.go(-1)

this.$router.back()

// 前进一步

this.$router.go(1)

this.$router.forward()

使用 replace（不保留历史记录）

this.$router.replace('/login')

params 和 query 的区别：

params 需要路由配置中声明动态参数，如：

{ path: '/user/:id', name: 'user', component: User }

然后跳转

this.$router.push({ name: 'user', params: { id: 123 } })

query 则是 ?key=value 形式，不需要路由中定义动态参数：

this.$router.push({ path: '/search', query: { key: 'vue' } })

推荐使用场景总结

场景

推荐方式

页面按钮点击跳转

this.$router.push()

导航栏、侧边菜单跳转

登录成功后跳主页

this.$router.replace('/home')

页面初始化重定向

路由配置中的 redirect

返回上一步

this.$router.go(-1)