VueRouter의 Redirection & Alias 파헤치기

Redirection

리다이렉션은 route 설정 시 정의할 수도 있습니다.
예를 들어 /home에서 /로 리다이렉션을 시켜보겠습니다.

// String으로 작성한 리다이렉션
const routes = [{ path: '/home', redirect: '/' }]

// 이름이 있는 라우토로 설정한 리다이렉션
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

// 함수를 사용한 동적 리다이렉션
const routes = [
    {
        // /search/screens -> /search?q=screens
        path: '/search/:searchText'
        redirect: to => {
            return { path: '/search', query: { q: to.params.searchText } },
        },
    },
    {
        path: '/search',
        // ...
    }
]

 

참고해야할 점은 Vue Router에는 Navigation Guard라는 것이 존재하는데 Navigation Guard는 리다이렉션이 정의된 라우트에는 적용되지 않습니다.

 

redirect를 정의한 경우, component속성을 생략할 수 있습니다.
이는 해당 route에는 도달할 수 없으므로 렌더링할 컴포넌트가 없기 때문입니다.

 

단, Nested Route(중첩된 라우트)를 사용하는 경우에는 예외입니다.
라우트에 children과 redirect속성이 있으면 component속성도 있어야 합니다.

상대적인 리다이렉션

리다이렉션은 상대경로로 동작하게 할 수도 있습니다.

const routes = [
    {
       // 항상 `/users/:id/posts`는 `/users/:id/posts/profile`로 리디렉트 됨.
        path: '/users/:id/posts',
        redirect: to => {
            return 'profile'
        },
    },
]

Alias(별칭)

route에서 alias(별칭)을 이용하면 해당 URL로 진입시 path로 설정된 컴포넌트를 표출하게 할 수 있습니다.

어떤 경우에 사용 할 수 있을까요?
path가 /인 Homepage.vue컴포넌트가 있다고 가정해 봅시다.
우리는 /home으로 진입했을 경우에도 Homepage.vue가 표출되게 하고 싶습니다.
이럴 경우 사용하게 됩니다.

예시를 보시죠.

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

 

만약에 /homepage의 경우에도 Homepage.vue를 표출하고 싶다면 배열을 이용합니다.

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

 

다만, 별칭을 사용하면 중첩 구조에서 제약을 받게됩니다.

하지만, UI 구조를 임의의 URL에 자유롭게 매핑 할 수 있습니다.

예를 들면 과도한 Nested route(중첩 라우트)로 인한 URL의 길이가 너무 길어졌을 경우 짧게 대체 할 수 있는 것이죠.
Nested route(중첩 라우트)에 절대 route를 추가시 /로 시작하는 별칭을 정의합니다.

 

유의사항은 route에 parameter가 존재하는 경우에는 라우트 별칭에 parameter를 반드시 포함해야 합니다.

const routes = [
    {
        path: '/users/:id',
        component: UsersLayout,
        children: [
            {
                path: 'profile',
                component: UserList,
                alias: ['/:id', ''],
            },
        ],
    },
]