[Udemy Vue 완벽가이드 Section13] 170. router-link로 탐색하기

이제 라우트 등록은 마쳤고, 애플리케이션 내에서 해당 라우트에 접속할 수 있는지를 확인해보자.

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

 

TheNavigation.vue파일을 보면 두 버튼이 있는데, 이것들로는 App.vue에서 수신하는 커스텀 이벤트(set-page)를 발생시킬 수 있다.

<template>
  <header>
    <nav>
      <ul>
        <li>
          <button @click="setActivePage('teams-list')">Teams</button>
        </li>
        <li>
          <button @click="setActivePage('users-list')">Users</button>
        </li>
      </ul>
    </nav>
  </header>
</template>

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

 

 

이제 더이상 navigate하지는 않을 거다. 어떤 페이지가 로드되어야 하는지 일일이 관리하지 않겠다는 뜻.

따라서 App.vue에서 activePage 데이터 프로퍼티를 삭제하고, <the-navigation>의 이벤트리스너도 삭제해보자.

<the-navigation @set-page="setActivePage"></the-navigation>

<!--아래와 같이, 이벤트리스너 삭제-->
<the-navigation></the-navigation>

 

이에 따라, 아래 setActivePage 메서드도 삭제하자.

 

이제 TheNavigation.vue파일에서는 set-page를 emit하지 않으므로 setActivePage메서드도 필요없다.

script블록 전체를 삭제해도 된다. 따로 컴포넌트 구성을 필요치않기 때문.

 

# router-link

이제 이동 방법을 달리 해볼텐데, 버튼을 사용하는 대신 Vue라우터에서 사용할 수 있는 내장 컴포넌트를 이용해볼거다.

→ router-link 컴포넌트

 

HTML요소의 내장 a태그와 비슷하다고 생각할 수 있으나, 좀 더 특별한 a태그이다.

다른 페이지를 로드해서 전체 앱을 새로고침하여 현재 상태를 잃게 되는 a태그가 아니라, 브라우저 기본값으로 다른 페이지가 로드되는 것을 막고, Vue라우터를 통해 사용자가 클릭한 링크를 분석하여 알맞은 컴포넌트를 로드하며 URL을 업데이트하는 특별 a태그.

이런 작업을 처리하는 것이 router-link.

 

이 컴포넌트 내에는 텍스트도 입력해서 전달할 수 있고, 그 외 HTML 요소 또한 전달할 수 있다.

<router-link><h2></h2></router-link>

router-link가 내부적으로 슬롯을 사용하기 때문.

지금은 텍스트만 전달해보겠다.

<router-link>Teams</router-link>

 

## to 프로퍼티

물론 이제 router-link를 구성해줘야한다. 이때 가장 중요한 구성은 바로 to 프로퍼티.

to프로퍼티는 여러 값을 가질 수 있는데 가장 흔한 사용 방법으로는 접속하고자 하는 경로를 문자열로 입력하는 것.

이 경우 '/teams'가 된다.

이때 경로는 routes 구성을 통해 지원하고 있는 라우트여야 한다.

<router-link to="/teams">Teams</router-link>

//main.js
const router = createRouter({ //여기서 지원하고 있는 route여야한다.
  history: createWebHistory(),
  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
  ],
});

 

이렇게 첫번째 버튼에 대한 설정은 끝났다.

 

두번째 버튼 또한 router-link로 대체해보자.

이번에는 Users 텍스트에 to프로퍼티도 /users로 설정.

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


// 위 button을 아래 router-link 컴포넌트로 대체.
<li>
  <router-link to="/teams">Teams</router-link>
</li>
<li>
  <router-link to="/users">Users</router-link>
</li>

 

이전에는 버튼이었고, 지금은 링크가 되었으니 스타일링에 대한 문제가 있다.

 

아래 CSS선택자로 입력된 button을 a태그로 고치자.

왜냐하면 router-link가 내부적으로 a태그를 렌더링하기때문에 a태그에 대해 스타일을 지정하면 된다.

font CSS프로퍼티는 삭제하고, 나머지는 그대로 둔다.

hover와 active앞 button도 a태그로 바꿔준다.

a {
  text-decoration: none;
  /* font: inherit; */
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: white;
  padding: 0.5rem 1.5rem;
  display: inline-block;
}

a:hover,
a:active {
  color: #f1a80a;
  border-color: #f1a80a;
  background-color: #1a037e;
}

 

그리고 아래 새로운 css프로퍼티로 text-decoration을 추가한 뒤, none으로 설정한다.

이렇게 스타일링을 업데이트한 뒤, 저장해서 새로고침해보면 이전과 같이 버튼의 모습을 보이지만 이들은 실제 링크로 작동한다.

클릭해보면 각기 다른 라우트를 오가는것을 볼 수 있다.

 

 

## router-link의 요소분석

개발자도구로 각 요소를 살펴보면 이론상 설명했던 그대로를 볼 수 있다.

ref속성을 갖는 a태그가 보인다.

그리고 router-link 컴포넌트가 브라우저의 기본동작을 막기 때문에, 브라우저에서 자체적으로 다른 HTML파일을 로드하는 일이 없다.

대신, 라우터가 ref 속성의 값을 분석하고 라우팅 구성을 확인하여 알맞은 Vue 컴포넌트가 로드될 수 있도록 한다.

 

또한 css 클래스가 추가된 것도 볼 수 있는데 

'router-link-active'와 'router-link-exact-active'인데 지금은 Teams 페이지에서만 이 작업이 가능하다.

다른 리스트 아이템에서는 이와 같은 class를 찾아볼 수 없다.

해당 class는 Vue라우터가 자동으로 추가한 것으로 현재 선택된 링크, 즉 현재 활성 상태인 라우트에 대해서만 추가된다.

따라서 선택한 링크를 기반으로 스타일을 지정할 수 있고, 이를 통해 현재 유저가 있는 라우트에 대한 피드백을 제공할 수 있다.

 

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