重定向和别名 | Vue Router

重定向：智能的 URL 跳转

重定向功能允许你将一个 URL 自动跳转到另一个 URL，这在网站重构、URL 优化或功能迁移时非常有用。

基本重定向

const routes = [
  { path: '/home', redirect: '/' }
]

访问 /home 会自动跳转到 /，但浏览器地址栏显示的是 /home。

命名路由重定向

const routes = [
  { path: '/home', redirect: { name: 'homepage' } }
]

函数式重定向

最灵活的方式，支持动态逻辑：

const routes = [
  {
    path: '/search/:searchText',
    redirect: to => {
      // 将路径参数转换为查询参数
      return { 
        path: '/search', 
        query: { q: to.params.searchText } 
      }
    },
  }
]

🔍 示例：访问 /search/vue 会重定向到 /search?q=vue

相对重定向

const routes = [
  {
    path: '/users/:id/posts',
    redirect: to => to.path.replace(/posts$/, 'profile')
  }
]

别名：一个路由，多个入口

别名允许同一个组件通过不同的 URL 访问，这在创建友好的 URL 或支持旧链接时非常有用。

基本别名

const routes = [
  { path: '/', component: Homepage, alias: '/home' }
]

访问 /home 会渲染 Homepage 组件，但 URL 保持为 /home。

多个别名

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      {
        path: '',
        component: UserList,
        alias: ['/people', 'list'] // 支持多个别名
      },
    ],
  },
]

现在可以通过以下 URL 访问用户列表：

• /users (原始路径)
• /people (绝对别名)
• /users/list (相对别名)

带参数的别名

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      {
        path: 'profile',
        component: UserDetails,
        alias: ['/:id', ''] // 包含参数
      },
    ],
  },
]

支持的访问方式：

• /users/24/profile (原始路径)
• /24 (绝对别名)
• /users/24 (相对别名)

重定向 vs 别名：如何选择？

重定向的特点

• URL 会改变 - 浏览器地址栏显示目标 URL
• SEO 友好 - 告诉搜索引擎这是永久或临时跳转
• 用户体验 - 用户知道他们被带到了新位置

别名的特点

• URL 不变 - 浏览器地址栏保持原始 URL
• 透明访问 - 用户不知道他们在访问别名
• 兼容性 - 完美支持旧链接

实际应用场景

场景 1：网站改版

// 旧链接重定向到新结构
{ path: '/old-page', redirect: '/new-feature/page' }

// 同时支持新旧 URL
{ path: '/new-feature/page', component: NewPage, alias: '/legacy-page' }

场景 2：多语言支持

{
  path: '/en/about',
  component: About,
  alias: ['/about', '/zh/about'] // 支持多种语言入口
}

场景 3：URL 简化

{
  path: '/products/:category/:id',
  component: ProductDetail,
  alias: '/p/:id' // 简短的分享链接
}

SEO 注意事项

规范链接（Canonical URLs）

使用别名时，确保定义规范链接以避免重复内容：

<!-- 在组件头部添加 -->
<link rel="canonical" :href="`https://example.com${$route.path}`" />

HTTP 状态码

重定向会返回不同的 HTTP 状态码：

• 301 - 永久重定向（搜索引擎会更新索引）
• 302 - 临时重定向（搜索引擎保持原索引）

最佳实践

1. 明确意图 - 重定向用于跳转，别名用于多入口
2. 保持简洁 - 避免过度复杂的重定向逻辑
3. 测试所有路径 - 确保重定向和别名在各种情况下都能正常工作
4. 考虑用户体验 - 选择对用户最友好的方案

🚀 提示：合理使用重定向和别名可以大大提升网站的用户体验和 SEO 效果。