Vue重定向redirect的三种写法总结
作者：WZMeiei
这篇文章主要介绍了Vue重定向redirect的三种写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、写法 1：直接路径跳转（最简单）
const router = createRouter({
routes: [
{
path: '/原路径', // 用户访问的路径
redirect: '/目标路径' // 直接跳转到这个路径
}
]
})必记规则：
redirect后直接跟字符串路径（必须以/开头）。- 路径必须存在：确保
/目标路径在路由配置里有对应的组件。
示例：
{ path: '/old', redirect: '/new' } // 访问 /old → 自动跳转到 /new二、写法 2：通过路由名称跳转（更灵活）
const router = createRouter({
routes: [
{
path: '/原路径',
redirect: { name: '目标路由名称' } // 通过路由的 name 属性跳转
},
// 必须先定义目标路由，并设置 name
{
path: '/目标路径',
name: '目标路由名称', // 给路由起个名字
component: 目标组件
}
]
})必记规则：
redirect后是对象，必须包含name属性。- 路由名称必须先定义：确保
name: '目标路由名称'在路由配置里存在。
示例：
{ path: '/user', redirect: { name: 'profile' } } // 访问 /user → 跳转到 name 为 profile 的路由三、写法 3：动态跳转（带参数，最灵活）
const router = createRouter({
routes: [
{
path: '/原路径/:参数名', // 带动态参数的路径
redirect: to => {
// to 是当前访问的路由对象
return {
path: '/目标路径',
query: { 参数名: to.params.参数名 } // 传递参数
}
}
}
]
})必记规则：
redirect后是箭头函数，函数返回一个对象。
参数传递：
to.params.参数名→ 获取当前路由的动态参数（如/user/123中的123）。query: { 参数名: 值 }→ 把参数转为查询参数（如?id=123）。
示例：
{
path: '/search/:keyword', // 访问 /search/vue
redirect: to => {
return {
path: '/results',
query: { q: to.params.keyword } // 跳转到 /results?q=vue
}
}
}四、核心规则速查表（必须记住！）
| 写法 | 固定格式 | 关键注意点 |
|---|---|---|
| 直接路径 | redirect: '/目标路径' | 路径必须以 / 开头，且已配置路由 |
| 路由名称 | redirect: { name: '目标名称' } | 必须先定义带 name 的路由 |
| 动态跳转 | redirect: to => ({ ... }) | 用 to.params 获取当前路由参数 |
五、完整示例（三种写法对比）
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import Profile from './views/Profile.vue'
import Search from './views/Search.vue'
import Results from './views/Results.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
// 写法1：直接路径跳转
{ path: '/', redirect: '/home' },
// 写法2：通过路由名称跳转
{ path: '/user', redirect: { name: 'profile' } },
{ path: '/profile', name: 'profile', component: Profile },
// 写法3：动态跳转（带参数）
{
path: '/search/:keyword',
redirect: to => ({
path: '/results',
query: { q: to.params.keyword }
})
},
{ path: '/results', component: Results },
// 基础路由
{ path: '/home', component: Home },
]
})
export default router六、一句话总结
重定向的本质是 “访问 A 路径时，自动跳转到 B 路径”
三种写法只是跳转方式不同：
- 直接路径：简单粗暴，适合固定跳转。
- 路由名称：解耦路径，适合路径可能变化的场景。
- 动态跳转：带参数传递，适合需要参数处理的场景。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。