vue2路由跳转的所有方式

在 Vue 2 中，路由跳转主要通过三种方式实现：声明式导航、编程式导航 和 重定向/别名。

1. 声明式导航（使用 <router-link>）

这是最常见也最简单的方式，适用于页面中的导航链接。

<router-link to="/home">首页</router-link>
<router-link :to="{ name: 'User', params: { id: 123 } }">用户页</router-link>

• to="/home"：跳转到 /home 路由

• :to="{ name: 'User', params: { id: 123 } }"：使用路由名称跳转并传递参数

注意：params 只能与 name 一起使用，不能与 path 一起用。

2. 编程式导航（使用 $router.push 或 $router.replace）

适用于在 JavaScript 中控制跳转，比如点击按钮或逻辑判断后跳转。

// 使用路径跳转
this.$router.push('/about')// 使用名称跳转并传参
this.$router.push({ name: 'User', params: { id: 123 } })// 使用 query 参数
this.$router.push({ path: '/search', query: { keyword: 'Vue' } })// 替换当前历史记录（不会留下浏览记录）
this.$router.replace('/login')

3. 重定向与别名（在路由配置中定义）

适用于设置默认页面或兼容旧路径。

const routes = [{ path: '/', redirect: '/home' }, // 重定向{ path: '/old-home', alias: '/home' } // 别名
]

• redirect：访问 / 会自动跳转到 /home

• alias：访问 /old-home 实际显示的是 /home 的内容

补充：路由参数接收方式

在组件中接收参数：

// 接收 query 参数
this.$route.query.keyword// 接收 params 参数
this.$route.params.id