重定向和别名

重定向

作用：当用户访问某个路径时，自动跳转到另一个路径。相当于告诉路由：“这个路由其实在别的地方。”

在路由表中重定向

• 基本写法

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

访问 /home 时，会 直接跳转到 /。

• 重定向到命名路由

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

• 重定向函数

const routes = [
  {
    path: '/search/:keyword',
    redirect: to => ({
      path: '/search',
      query: { q: to.params.keyword }
    })
  }
]

注意

• redirect 路由不会渲染组件，也不执行当前路由的导航守卫。

• 但在有子路由 (children) 的情况下，仍然要提供一个 component。

在导航守卫中重定向

在全局前置守卫中通过返回一个路由地址可以重定向到一个不同的地址。当前路由的导航将被终止。

具体见导航守卫

别名

作用：为同一个路由提供多个访问路径（URL 不变，内容相同）。

基本语法：

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

访问 /home 实际展示 / 的内容，但地址栏仍然是 /home。 （区别于重定向：重定向会改变 URL）

多个别名：

{
  path: '/users',
  component: UsersLayout,
  children: [
    {
      path: '',
      component: UserList,
      alias: ['/people', 'list']  // /users、/users/list、/people 都可访问
    }
  ]
}