[Udemy Vue 완벽가이드 Section13] 169. 라우트 등록 및 렌더링

# 라우트 등록

라우트는 어떻게 등록할까?

 

## routes 옵션

routes 배열에는 JS객체를 전달해야한다.

모든 객체는 하나의 라우트에 해당하며 라우트에 대한 구성이 있어야한다.

This tells the router for which path that's the part of the URL after the domain, a certain component should be loaded.

 

1/ path 옵션

모든 라우트에 대해 설정하는 중요한 옵션으로 경로 path옵션이 있다.

path는 URL에서 도메인의 뒷부분에 해당하며, 라우터에게 이 path로 가면 특정 컴포넌트를 로드해야하는지 한다는걸 알려준다.

가령, '/teams'에 대해 특정 컴포넌트가 로드된다고 해보자.

'도메인../teams'가 로드될 때, 로드되어야 하는 컴포넌트가 있다.

 

2/ component 옵션

이때, 두 번째 옵션인 컴포넌트 component 옵션이 등장한다.

여기서는 사용자가 '/teams'라는 경로의 도메인을 방문했을 때, Vue라우터가 어떤 컴포넌트를 로드해야 하는지 정의한다.

지금과 같은 경우에는 '/teams' path의 도메인을 방문 시, 'TeamsList' 컴포넌트가 된다.

const router = createRouter({
  routes: [
    { path: '/teams', component: TeamsList },
  ],
});

 

 

현재 App.vue에서 TeamsList 컴포넌트를 로딩할때 동적인 component 컴포넌트를 사용해서 로드하고 있다.

<!--App.vue-->
<the-navigation @set-page="setActivePage"></the-navigation>
<component :is="activePage"></component>

export default {
  data() {
    return {
       activePage: 'teams-list',
    };
  },
  methods: {
     setActivePage(page) {
       this.activePage = page;
     },
  },
};

 

set-page 이벤트를 emit하는 the-navigation이 있는데 이 이벤트는 다음 두 버튼 중 하나를 클릭했을때 실행된다.

<!--TheNavigation.vue-->
<li>
  <button @click="setActivePage('teams-list')">Teams</button>
</li>
<li>
  <button @click="setActivePage('users-list')">Users</button>
</li>

<script>
 export default {
   emits: ['set-page'],
   methods: {
     setActivePage(page) {
       this.$emit('set-page', page);
     },
   },
 };
</script>

 

set-page 이벤트에 의해서 data프로퍼티 'activePage'가 'teams-list'나 'users-list'로 바뀐다.

이는 App 컴포넌트에 등록된 TeamsList.vue와 UsersList.vue 두 컴포넌트이다.

클릭 시 이 두 컴포넌트를 오가는 것.

 

 

1) 라우트 설정

이런 식으로 작동은 하지만, URL이 업데이트되지는 않으며 공유가 불가하다.

'/teams' 라우트에는 TeamsList 컴포넌트가 로드되도록 설정할텐데, 이를 위해 main.js파일에 TeamsList를 import해온다.

그리고 components: TeamsList로 입력해서 Vue라우터로 하여금 '/teams' 경로에 대해서는 'TeamsList' 컴포넌트가 로드되어야한다고 설정한다.

로드하고자 하는 라우트가 이것 하나 뿐만은 아니니, 이 구성을 그대로 복제해서 /users 라우트도 등록해보자.

여기서는 UsersList 컴포넌트를 로드하자.

이렇게 두 가지 라우트를 설정해보았다.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
  ],
});

 

라우트 구성은 마쳤으나, 제대로 작동하기 위해서는 몇 가지가 빠져있다.

 

2) Vue앱에 router 연결 - use메서드

현재 이 두 라우트는 router라는 상수에만 저장되어 있고, 이 상수를 사용한 바가 없다.

이제 Vue앱에 다음과 같은 라우트의 router 상수가 있음을 알려야한다.

 

아래 app상수에서 use메서드를 통해 이 작업을 할 수 있다.

use는 내장 메서드로 Vue앱에 서드파티패키지와 다른 기능을 연결해주는 역할을 한다.

router를 전달하면 Vue앱이 이 router를 인식하게 된다.

const app = createApp(App);

app.use(router);

 

첫 단계는 끝났지만 아직 중요한 부분이 남아 있다.

Vue앱이 Vue라우터에 대해 인식하게 만들었다. 이론적으로 우리가 '/teams' 도메인을 방문했을 때 해당하는 컴포넌트를 로드하기를 원한다는걸 Vue라우터가 알고 있다. 하지만 중요한 정보가 하나 빠져 있다.

 

3) '컴포넌트 렌더링 장소' 라우터에 알리기 - router-view

이 컴포넌트를 어디에 로드해야 하는지는 모르고 있다.

현재는 해당 컴포넌트가 어디에 렌더링되어야하는지 라우터에게 알려준 바가 없다.

Vue 라우터에게 렌더링 위치를 알려주는 특수한 컴포넌트가 있다. 어차피 이 동적 접근 방식은 더이상 사용하지 않으므로 지금 이 동적 컴포넌트를 해당 특수 컴포넌트로 바꾸면 된다.

 

App.vue에서 main요소안에 선택된 라우트에 대한 컴포넌트가 렌더링되도록 설정해보겠다.

그리고 Vue라우터로 하여금 이를 알리기 위해 이제는 '내장형'이 된 몇가지 컴포넌트를 사용할 거다.

'내장형'이라고 한 이유는, Vue앱에서 Vue라우터를 쓸 때만 해당 컴포넌트를 사용 가능하기 때문이다.

사용할 수 있게 된 내장 컴포넌트는 router-view컴포넌트로, 바로 이 위치로 '선택된, 라우트되는 컴포넌트'가 로드되어야 한다고 Vue 라우터에게 알리는 플레이스홀더의 역할을 한다.

 

 

 

이제 동적 컴포넌트(component :is="")를 사용하지 않으므로, App.vue에 TemasList와 UsesList 컴포넌트를 등록할 필요가 없다. 따라서 import하는 TeamsList, UsersList를 삭제해도 된다.

더이상 템플릿에서 두 컴포넌트의 선택자를 통해 이들을 이용하지 않고, router 상수를 통해 main.js파일에서 선택하므로.

 

이제 라우터로 하여금 컴포넌트를 로드할 장소를 알려주는 작업까지 마쳤다.

새로고침해보자.

현재 화면(localhost:8080/)에는 보이는 것이 없다. '/'뒤에 아무것도 입력하지 않은 기본 도메인이기 때문.

등록한 라우트는 /teams와 /users였다.

 

이 두 라우트로 가보자.

'localhost:8080/teams'를 입력하면 Teams 페이지를 볼 수 있다.

'localhost/users'를 입력하면 Users 페이지가 나온다.

 

이제 공유가 가능한 링크가 되었다.

물론 아직은 페이지 내에서 이동할 수는 없다. 페이지 내에서 이동할 수 있어야 직접 URL을 입력하지 않아도 된다.

유저 그 누구도 웹페이지를 URL을 직접 바꾸면서 사용하지는 않으니..

 

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