重定向与别名

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

const routes = [
  {
    path: '/old-path',
    redirect: '/new-path'
  }
]

const routes = [
  {
    path: '/old-path',
    redirect: { name: 'Home' }
  },
  
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const routes = [
  {
    path: '/search/:keyword',
    redirect: to => {
      // to 是目标路由对象
      // 返回重定向的目标路径或对象
      return { path: '/result', query: { q: to.params.keyword } }
    }
  }
]

const routes = [
  {
    path: '/user',
    component: User,
    redirect: '/user/profile',  // 重定向到默认子路由
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

const routes = [
  {
    path: '/settings',
    component: Settings,
    children: [
      {
        path: '',
        redirect: 'profile'  // 相对路径
      },
      {
        path: 'profile',
        component: ProfileSettings
      },
      {
        path: 'security',
        component: SecuritySettings
      }
    ]
  }
]

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated()) {
        next('/login')  // 重定向到登录页
      } else {
        next()
      }
    }
  }
]

const routes = [
  // 旧路由重定向到新路由
  { path: '/article', redirect: '/blog' },
  { path: '/article/:id', redirect: '/blog/:id' },
  
  // 新路由
  { path: '/blog', component: BlogList },
  { path: '/blog/:id', component: BlogDetail }
]

const routes = [
  // 访问根路径重定向到首页
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home }
]

const routes = [
  {
    path: '/user/:id',
    redirect: to => {
      return {
        name: 'UserDetail',
        params: { id: to.params.id }
      }
    }
  }
]

const routes = [
  {
    path: '/home',
    component: Home,
    alias: '/'  // 别名
  }
]

const routes = [
  {
    path: '/home',
    component: Home,
    alias: ['/', '/index', '/main']  // 多个别名
  }
]

const routes = [
  {
    path: '/user',
    component: User,
    alias: '/u',  // 父路由别名
    children: [
      {
        path: 'profile',
        component: UserProfile,
        alias: ['info', 'me']  // 子路由别名
      }
    ]
  }
]

const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    alias: ['/u/:id', '/member/:id'],
    props: true
  }
]

const routes = [
  // 重定向：URL 会改变
  { path: '/a', redirect: '/b' },
  { path: '/b', component: B },
  
  // 别名：URL 不改变
  { path: '/c', component: C, alias: '/d' }
]

const routes = [
  // 重定向示例
  {
    path: '/old-about',
    redirect: '/about',
    // 用户访问 /old-about → URL 变成 /about
  },
  
  // 别名示例
  {
    path: '/about',
    component: About,
    alias: '/info',
    // 用户访问 /info → URL 保持 /info，渲染 About 组件
  }
]

const routes = [
  // 旧路由重定向到新路由
  {
    path: '/posts',
    redirect: '/blog'
  },
  {
    path: '/posts/:id',
    redirect: '/blog/:id'
  },
  {
    path: '/posts/:id/comments',
    redirect: '/blog/:id/comments'
  },
  
  // 新路由
  {
    path: '/blog',
    name: 'BlogList',
    component: () => import('@/views/blog/List.vue')
  },
  {
    path: '/blog/:id',
    name: 'BlogDetail',
    component: () => import('@/views/blog/Detail.vue'),
    props: true
  },
  {
    path: '/blog/:id/comments',
    name: 'BlogComments',
    component: () => import('@/views/blog/Comments.vue'),
    props: true
  }
]

const routes = [
  // 用户相关
  {
    path: '/user/:id',
    component: UserDetail,
    alias: ['/u/:id'],
    props: true
  },
  
  // 产品相关
  {
    path: '/product/:id',
    component: ProductDetail,
    alias: ['/p/:id', '/item/:id'],
    props: true
  },
  
  // 搜索
  {
    path: '/search',
    component: Search,
    alias: ['/s', '/find']
  }
]

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    redirect: '/admin/dashboard',  // 默认重定向
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/admin/Dashboard.vue')
      },
      {
        path: 'user',
        redirect: 'user/list',  // 子路由默认重定向
        children: [
          {
            path: 'list',
            component: () => import('@/views/admin/user/List.vue')
          },
          {
            path: 'detail/:id',
            component: () => import('@/views/admin/user/Detail.vue')
          }
        ]
      }
    ]
  }
]

const routes = [
  {
    path: '/dashboard',
    redirect: to => {
      // 根据用户角色重定向到不同页面
      const role = store.state.user.role
      if (role === 'admin') {
        return '/admin/dashboard'
      } else if (role === 'user') {
        return '/user/home'
      }
      return '/login'
    }
  }
]

const routes = [
  {
    // 旧格式：/user-123 重定向到 /user/123
    path: '/user-:id(\\d+)',
    redirect: to => {
      return {
        name: 'UserDetail',
        params: { id: to.params.id }
      }
    }
  },
  
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetail,
    props: true
  }
]

const routes = [
  {
    path: '/old-search',
    redirect: to => {
      return {
        path: '/search',
        query: to.query  // 保留查询参数
      }
    }
  },
  
  {
    path: '/search',
    component: Search
  }
]

const routes = [
  {
    path: '/old-article',
    redirect: to => {
      return {
        path: '/article',
        hash: to.hash  // 保留 hash
      }
    }
  }
]

const routes = [
  { path: '/a', redirect: '/b' },
  { path: '/b', redirect: '/c' },
  { path: '/c', component: C }
]

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!hasPermission('admin')) {
        next({ name: 'Forbidden' })  // 重定向
      } else {
        next()
      }
    }
  }
]

const routes = [
  {
    path: '/admin',
    component: Admin,
    alias: '/manage',
    meta: { requiresAuth: true, title: '管理后台' }
    // 别名共享相同的 meta 信息
  }
]

// ✅ 推荐：保留旧 URL 的兼容性
const routes = [
  { path: '/old-path', redirect: '/new-path' },
  { path: '/new-path', component: NewComponent }
]

// ❌ 不推荐：直接删除旧路由
const routes = [
  { path: '/new-path', component: NewComponent }
  // 用户访问 /old-path 会 404
]

const routes = [
  {
    path: '/user/profile/settings',
    component: UserSettings,
    alias: ['/settings', '/account']  // 提供短路径
  }
]

const routes = [
  {
    path: '/user',
    component: User,
    redirect: '/user/profile',  // 明确指定默认子路由
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

// ❌ 错误：重定向循环
const routes = [
  { path: '/a', redirect: '/b' },
  { path: '/b', redirect: '/a' }
]

// ✅ 正确：避免循环
const routes = [
  { path: '/a', redirect: '/c' },
  { path: '/b', redirect: '/c' },
  { path: '/c', component: C }
]

// ✅ 推荐：使用命名路由
{ path: '/old', redirect: { name: 'New' } }

// ❌ 不推荐：硬编码路径
{ path: '/old', redirect: '/new-path' }

// 在重定向后的组件中
// 注意：Vue Router 3 中 redirectedFrom 是原始位置的 fullPath 字符串（v4 中才是路由对象）
this.$route.redirectedFrom  // 如 '/old-search?q=vue'

// 批量重定向配置
const redirects = [
  { from: '/old-about', to: '/about' },
  { from: '/old-contact', to: '/contact' },
  { from: '/old-blog', to: '/blog' }
]

const routes = [
  ...redirects.map(r => ({
    path: r.from,
    redirect: r.to
  })),
  // 正常路由...
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
  { path: '/blog', component: Blog }
]

const routes = [
  {
    path: '/user',
    alias: '/u',
    children: [
      {
        path: 'profile',
        component: UserProfile
      }
    ]
  }
]

// 访问路径：
// /user/profile
// /u/profile（继承父别名）

// 全局后置钩子
router.afterEach((to, from) => {
  if (to.redirectedFrom) {
    console.log('重定向来源:', to.redirectedFrom)  // fullPath 字符串
    console.log('当前路径:', to.path)
  }
})

// 获取路由配置
const route = router.options.routes.find(r => r.path === '/user')
console.log('别名配置:', route.alias)

{
  path: '/path',
  redirect: string | object | function
}

{
  path: '/path',
  alias: string | string[]
}