리다이렉트와 별칭 | Vue Router

본 게시글은 아래의 글을 필사하였습니다.

https://router.vuejs.org/kr/guide/essentials/redirect-and-alias.html

리다이렉트와 별칭 | Vue Router

리다이렉트(Redirect)

리다이렉션은 routes 설정에서도 할 수 있습니다. /a 에서 /b 로 리디렉션하려면

const router = new VueRouter({
	routes: [
    	{ path: '/a', redirect: '/b' }
    ]
})

리다이렉션은 이름이 지정된 라우트를 지정할 수도 있습니다.

const router = new VueRouter({
	routes: [
    	{ path: '/a', redirect: { name: 'foo' }}
    ]
})

또는 동적 리다이렉션을 위한 함수를 사용할 수도 있습니다.

const router = new VueRouter({
	routes: [
    	{ path: '/a', redirect: to => {
        // 함수는 인수로 대상 라우트를 받습니다.
        // 여기서 path / location 반환합니다.
        }}
    ]
})

 

별칭(Alias)

리다이렉트는 사용자가 /a 를 방문했을 때 URL이 /b 로 대체로 다음 /b 로 매칭된다는 것을 의미합니다.

하지만 별칭이란 무엇일까요?

아래 예제에서는 /a 의 별칭(Alias)은 /b 로, 사용자가 /b 를 방문했을 때 URL은 /b 을 유지하지만 사용자가 /a 를 방문한 것처럼 매칭하는 것으로 다음과 같이 표현할 수 있습니다.

const router = new VueRouter({
	routes: [
    	{ path: '/a', component: A, alias: '/b' }
    ]
})

별칭을 사용하면 중첩 구조에 의해 제약을 받는 대신 UI 구조를 임의의 URL에 매핑할 수 있습니다.