Redirect와 Alias

Redirect

리다이렉트도 routes 구성 안에서 설정합니다. /home에서 /로 리다이렉트하려면:

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

리다이렉트 대상은 이름 있는 라우트일 수도 있습니다:

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

동적 리다이렉트를 위해 함수를 사용할 수도 있습니다:

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 함수는 대상 라우트를 인자로 받습니다
      // 여기서 redirect할 path/location을 반환합니다.
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

내비게이션 가드는 리다이렉트하는 라우트 자체에는 적용되지 않고 대상 라우트에만 적용된다는 점에 유의하세요. 예를 들어 위 예제에서 /home 라우트에 beforeEnter 가드를 추가해도 아무 효과가 없습니다.

redirect를 작성할 때는 해당 라우트에 직접 도달하지 않으므로 렌더링할 컴포넌트가 없어 component 옵션을 생략할 수 있습니다. 유일한 예외는 중첩 라우트입니다. 라우트 레코드에 children과 redirect 속성이 모두 있다면 component 속성도 함께 있어야 합니다.

상대 리다이렉트

상대 location으로 리다이렉트할 수도 있습니다:

const routes = [
  {
    // /users/123/posts를 항상 /users/123/profile로 리다이렉트합니다
    path: '/users/:id/posts',
    redirect: to => {
      // 함수는 대상 라우트를 인자로 받습니다
      return to.path.replace(/posts$/, 'profile')
    },
  },
]

Alias

redirect는 사용자가 /home에 방문하면 URL이 /로 바뀌고, 그 뒤 /로 매치된다는 뜻입니다. 그렇다면 alias는 무엇일까요?

/의 alias를 /home으로 설정한다는 것은 사용자가 /home에 방문했을 때 URL은 /home으로 유지되지만, /에 방문한 것처럼 매치된다는 뜻입니다.

위 내용은 라우트 구성에서 다음과 같이 표현할 수 있습니다:

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

alias를 사용하면 구성의 중첩 구조에 얽매이지 않고 UI 구조를 임의의 URL에 매핑할 수 있습니다. 중첩 라우트에서 절대 경로로 만들려면 alias를 /로 시작하게 하세요. 배열을 사용해 여러 alias를 제공하는 것도 가능합니다:

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // 다음 3개의 URL에서 UserList를 렌더링합니다
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

라우트에 매개변수가 있다면 모든 절대 alias에도 그 매개변수를 포함해야 합니다:

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 다음 3개의 URL에서 UserDetails를 렌더링합니다
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

SEO 관련 참고: alias를 사용할 때는 canonical link를 반드시 정의하세요.

Redirect와 Alias ​

Redirect ​

상대 리다이렉트 ​

Alias ​

Redirect와 Alias

Redirect

상대 리다이렉트

Alias