Redirect
리디렉션은 routes 에서 설정 할 수 있습니다. /user에서 /post로 리디렉션하려면
const routes = [
... code
{
path: "{URL}",
name: "{라우터명}",
component: () => import("{컴포넌트 경로}"),
redirect: '{Redirect URL}'
},
... code
];
리디렉션은 이름이 지정된 라우트를 지정할 수 있다.
또는 아래 처럼 동적 리디렉션을 위한 함수를 사용할 수도 있다.
const routes = [
... code
{
path: "{URL}",
name: "{라우터명}",
component: () => import("{컴포넌트 경로}"),
redirect: to => {
// 함수는 인수로 대상 라우트를 받는다.
// 여기서 path/location 반환한다.
}
},
... code
];
구현 예시
const routes = [
... code
{
path: "/coffee",
name: "Coffee",
redirect: "/about",
},
... code
];
coffee url 입력시 about 화면 으로 이동 (웹 브라우저 url 입력창에 domain.com/about 으로 표시됨)
Alias
리다이렉트는 사용자가 /user를 방문했을 때 URL이 /post로 대체 된 다음 /post로 매칭된다는 것을 의미합니다. 별칭은 /user의 별칭은 /post는 사용자가 /post를 방문했을 때 URL은 /post을 유지하지만 사용자가 /user를 방문한 것처럼 매칭하는것 이다. 아래 처럼 위 라우터를 구현 할수 있다.
const routes = [
... code
{
path: "{URL}",
name: "{라우터명}",
component: () => import("{컴포넌트 경로}"),
alias: "{Alias URL}"
},
... code
];
구현 예시
const routes = [
... code
{
path: "/coffee",
name: "Coffee",
alias: "/profile",
},
... code
];
profile url 입력시 coffee 화면이 보임 (웹 브라우저 url 입력창에 domain.com/profile 으로 표시됨)