[Udemy Vue 완벽가이드 Section13] 178. 리디렉션 및 "Catch All" 라우트

지금까지 작업한 데모 앱에는 한 가지 문제점이 있다.

 

Teams 버튼과 Users 버튼에는 문제가 없고 팀원도 확인할 수 있지만

실제로 사용자 대부분은 도메인 주소(localhost:8080/)를 입력해서 페이지에 접속한다.

도메인 주소로 페이지에 접속하면 오류가 생기지는 않지만 화면에 아무것도 뜨지 않는다.

이러한 원인은 콘솔에서 확인할 수 있다.

→ 라우터가 '/'라는 경로를 찾지 못하기 때문.

즉, '도메인 주소/'와 일치하는 라우트를 못 찾는다.

빈 페이지가 기술적 오류는 아니지만 우리가 원하는 결과도 아니다.

 

 

이 문제를 해결해서 화면에 무언가를 출력해야한다.

물론 만드는 앱의 특성과 적용할 라우트에 따라 달라진다.

어쩌면 이 페이지에 컴포넌트를 출력할 수도 있다.

 

1/ 새 라우트 추가 + 컴포넌트 출력

'도메인 주소/'로 접속하면 TeamsList 컴포넌트를 출력하는 방법도 있다.

첫번째 라우트로 새로운 라우트를 추가해야 하는데 바로 path: '/'이다.

이 라우트로 접속하면 TeamsList을 출력하는게 좋다.

const router = createRouter({
  routes: [
    { path: '/', component: TeamsList }
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
    { path: '/teams/:teamId', component: TeamMembers, props: true },
  ],
});

 

이대로 저장하면 '도메인 주소/'에 해당하는 페이지에서 팀 목록을 확인할 수 있다.

문제없이 작동하지만, URL 끝에 /team가 있으면 좋겠다.

페이지에 TeamsList 컴포넌트가 나타날 땐 URL을 좀 더 이해하기 쉽도록 '도메인 주소/teams' 형태로 만들고 싶다.

페이지에 출력하는 컨텐츠 타입도 알 수 있는 URL이다.

 

2/ 라우트 리디렉션

그렇게 하기 위해서 할 작업은 바로 TeamsList 컴포넌트를 로드하는 대신 '/teams'에 해당하는 라우트로 리디렉션 하는 것.

라우터를 사용하면 가능하다.

라우트 구성 시, 라우트에 설정할 수 있는 또 다른 옵션이 있는데, 바로 redirect 프로퍼티.

이 프로퍼티에 리디렉션할 경로를 설정하면 된다.

const router = createRouter({
  routes: [
    { path: '/', redirect: '/teams' }
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
    { path: '/teams/:teamId', component: TeamMembers, props: true },
  ],
});

 

만약 '도메인 주소/'를 입력하면 '도메인 주소/teams'로 리디렉션한다.

→ { path: '/', redirect: '/teams' }

 

이렇게 저장한 후, '도메인 주소/'에 해당하는 localhost:8080으로 접속해보자.

localhost:8080을 적고 enter를 누르면 localhost:8080/teams로 바뀐다.

Vue 라우터에 의해 Teams List가 뜨는 페이지로 리디렉션됐다.

 

애플리케이션에 많이 쓰이는 기능이다.

이 외에도 다른 리디렉션 방법이 있다

 

3/ alias 옵션 설정

alias(별칭) 옵션을 설정하는 방법이 있다.

'/' 라우트 대신, 로드하려는 라우트로 이동해서 동일한 TeamsList 컴포넌트를 출력할 alias 옵션의 경로를 추가한다.

즉, '/'가 '/teams'의 별칭이 된다.

const router = createRouter({
  routes: [
    { path: '/teams', component: TeamsList, alias: '/' },
    { path: '/users', component: UsersList },
    { path: '/teams/:teamId', component: TeamMembers, props: true },
  ],
});

localhost:8080에 접속하면 여전히 팀 목록이 출력된다.

마치 '/' 라우트에 TeamsList 컴포넌트를 정의한 것과 같다.

alias 옵션을 이용해 간단히 작성할 수 있다.

 

# alias 옵션의 단점

하지만 alias옵션의 경우, 단점이 있다면 URL이 바뀌지 않는다는 점. 다른 라우트에서 같은 컴포넌트를 로드할 뿐.

이 점이 redirect 프로퍼티와의 차이다.

redirect 프로퍼티를 쓰면 URL이 바뀐다. 실제로 다른 경로로 리디렉션한다.

이건 애플리케이션 요구 사항이나 구현하고자 하는 기능에 따라 다른걸 사용하면 된다.

 

 

4/ 사용자가 지원하지않는 라우트로 접속하는 경우 - catchAll 라우트

이 데모 앱에서 다루지 않는 또 다른 사용 사례(user case)로는 사용자가 지원하지 않는 라우트로 접속하는 경우.

예를 들어, 'localhost:8080/something'으로 접속할 경우, 해당 URL에 대해 라우트를 지정하지 않았으므로 enter를 눌러도 화면에 아무것도 안뜬다.

 

물론 사용자가 입력할 수 있는 모든 URL에 대해 사용자가 입력할 수 있는 경로의 수는 무한하므로 전부 라우트를 지정할 수는 없다.

이럴 때 catchAll 라우트를 사용한다.

 

# catchAll 라우트 작성 위치

하단에 새 라우트를 추가해보자.

→ 왜냐하면 우선순위가 가장 낮으며, 상단의 라우트로 처리하지 못할 때만 catchAll 라우트가 처리하므로.

 

이 경우의 경로에는 '/'에 무언가가 추가되어야 한다.

어느 경로든 이 라우트와 일치해야 한다고 라우터에 알려주어야한다.

그러려면 동적 세그먼트(:)를 추가해야한다. 그 다음 원하는대로 이름을 정해라. 이번에는 notFound로 해보자.

그 다음 괄호를 입력하고 그 안에 .*을 입력해라.

const router = createRouter({
  routes: [
    { path: '/:notFound(.*)' },
  ],
});

보기엔 이상해보이지만 이는 경로가 동적 세그먼트임을 나타낸다.

'.*'은 실제로 정규 표현식으로 Vue 라우터가 지원하는 구문이다. 문자 조합은 어느 것이든 이 경로의 값으로 사용되면 결국 이 라우트에 연결되어야 한다는 뜻이다.

그래서 이 코드를 마지막에 작성한다. 마지막에 작성하지 않으면 다른 라우트를 덮어쓰므로.

하지만 위의 네 개 라우트가 입력된 경로를 처리하지 않으면 notFound 라우트가 처리할 거다.

 

 

그리고 여기에는 리디렉션할 경로를 정의하거나, 어떤 컴포넌트로 로드할지 정의할 수 있다.

예를 들어 지원하지 않는 경로에 접속하면, '/teams'로 리디렉션할 수 있다.

이렇게 저장한 후 URL에 'localhost:8080/something'을 입력하면 localhost:8080/teams로 리디렉션한다.

또는 NotFound.vue 컴포넌트를 생성할 수도 있다.

 

nav폴더에 NotFound.vue 컴포넌트를 생성하여 간단한 템플릿을 만들어보자.

<!--NotFound.vue-->
<template>
 <h2>Page not found! Maybe view our <router-link to="/teams">Teams</router-link>?</h2>
</template>

그리고 NotFound.vue 컴포넌트를 로드하자.

main.js파일에 import로 불러오면 NotFound 컴포넌트를 로드할 수 있다.

그리고 아래에서 NotFound 컴포넌트를 가리킨다.

import NotFound from './components/nav/NotFound.vue';

const router = createRouter({
  routes: [
    //...
    { path: '/:notFound(.*)', redirect: '/teams' },
    { path: '/:notFound(.*)', component: NotFound },
  ],
});

 

이렇게 작성한 후 저장하고, 지원하지 않는 경로(ex:localhost:8080/something)를 입력해보자.

Teams페이지로 이동할 수 있는 NotFound 페이지가 나타난다.

그리고 Teams를 클릭하면 Teams페이지로 이동한다.

여기까지 사용자가 지원하지 않는 경로를 입력했을 때 처리하는 방법을 살펴봤다.

 

다른 라우트를 덮어쓰지 않기 위해 마지막에 작성해야 하며, 사용하면 매우 유용하다.

리디렉션 기능까지 활용한다면 웹사이트 사용자가 특정 상황에서 어디로 이동할지 완벽하게 제어할 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.