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

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

一、Vue 中路由跳转的方式

1. 编程式导航（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。

2. 声明式导航（在模板中使用<router-link>）

<router-link to="/home">首页</router-link>

<!-- 跳转到命名路由 -->
<router-link :to="{ name: 'user', params: { id: 123 } }">用户详情</router-link>

<!-- 带查询参数 -->
<router-link :to="{ path: '/search', query: { key: 'vue' } }">搜索</router-link>

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

// router/index.js
{
  path: '/',
  redirect: '/home'
}

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

// 返回上一页（浏览器后退）
this.$router.go(-1)
this.$router.back()
// 前进一步
this.$router.go(1)
this.$router.forward()

5. 使用 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()
导航栏、侧边菜单跳转	<router-link>
登录成功后跳主页	this.$router.replace('/home')
页面初始化重定向	路由配置中的 redirect
返回上一步	this.$router.go(-1)