Vue Router重定向有三种核心方式：静态路径重定向（redirect字符串）、命名路由重定向（redirect对象含name）、函数式动态重定向（redirect为接收to参数的函数），分别适用于路径固定、可维护性要求高、需条件判断的场景。

Vue Router 中配置 redirect 实现页面重定向，核心是在路由定义时为某条路径直接指定跳转目标。它不经过组件渲染，浏览器地址栏会立即更新为新路径，适用于旧链接迁移、默认首页、权限拦截前的中转等场景。

基础静态重定向（最常用）

在 routes 数组中为某个 path 设置字符串形式的 redirect 值：

• 目标路径必须以 / 开头，且该路径需已在路由表中正确定义组件
• 访问原路径时，Router 自动触发跳转，不加载原路径对应组件

示例：

const routes = [
  { path: '/about-us', redirect: '/about' },
  { path: '/about', component: AboutView }
]

命名路由重定向（更健壮）

用对象写法指向已命名的路由，避免硬编码路径，利于后期维护：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• redirect 值为 { name: 'xxx' }，要求目标路由必须提前声明 name
• 即使目标路径后续修改（如从 /about 改为 /info），只要 name 不变，重定向仍有效

示例：

const routes = [
  { path: '/team', redirect: { name: 'company' } },
  { path: '/company', name: 'company', component: CompanyView }
]

函数式动态重定向（带逻辑判断）

当跳转目标依赖参数、查询条件或运行时状态时，把 redirect 设为函数：

立即学习“前端免费学习笔记（深入）”；

• 函数接收当前路由对象 to（含 params、query、fullPath 等）
• 返回字符串路径、命名路由对象，或完整路由位置对象（支持 path + query）

示例（根据 query 参数跳转）：

{ 
  path: '/jump',
  redirect: to => {
    if (to.query.type === 'admin') return '/admin/dashboard'
    return '/user/profile'
  }
}

根路径与 404 的常见重定向写法

两类高频需求，写法简洁但需注意细节：

• 根路径重定向：{ path: '/', redirect: '/home' } —— 用户访问 / 时自动进首页
• 404 捕获重定向：{ path: '/:pathMatch(.*)*', redirect: '/' } —— 匹配所有未定义路径，统一跳首页（Vue Router 4+ 推荐用 pathMatch）