[Udemy Vue 완벽가이드 Section16] 239. 페이지 연결하기

Header의 "Requests"메뉴를 클릭하여 이동할 수 있는 페이지인" RequestsReceived.vue"파일을 작업해보자.

현재는 요청이 없지만, "REQUESTS"라는 글자를 출력해서 제대로 로딩되는지 확인해보자.

 

현재 CoachesList에 등록된 코치는 없지만, "LIST OF COACHES"글자를 출력하여 컴포넌트 내의 내용으로 추가해보자.

여기에 ul이 있다고 해보자.

ul 위에 버튼 두개를 정의해보자.

- 하나는 코치 목록을 새로고침할 수 있는 버튼. 이후에 웹 내의 데이터베이스에 코치들이 저장되어 있는데 이 버튼을 통해 해당 최신 데이터를 fetch하는 것.

- 다른 버튼은 코치로서 등록을 위한 것. 사실 이 경우에는 버튼이 아니라 router-link가 되어야 한다.

 

CoachRegistration에 더미 코드를 추가해보자.

"REGISTER"

 

ContactCoach는 특정 코치의 연락 버튼을 클릭했을 때 이동하는 페이지.

지금 당장은 등록된 코치가 없다.

CoachDetail페이지에도 더미 템플릿 추가하자. 

<!--CoachDetail.vue-->
<template>
  DETAILS FOR COACH
  <router-view></router-view>
  <router-link to="/coaches/c1/contact">Contact</router-link> <!--c1은 추후 동적값-->
</template>

 

여기서 Contact를 클릭하면 contact 페이지로 이동한다.

하지만 contact 페이지로 이동해도 페이지에 나타나는 내용("DETAILS FOR COACH")에는 변함이 없다.

바로 contact 라우트가 '자식 라우트'이기 때문.

contact라우트는 CoachDetail의 자식 라우트로 이런 구조로 인해, 이 라우트는 기존에 화면에 표시된 것을 대체하는 것이 아니라 새로운 router-view를 필요로 한다.

 

해당 router-view는 자식 라우트(coach라우트)의 부모 컴포넌트(CoachDetail.vue) 내에 존재해야 한다.

이 경우 부모 컴포넌트는 CoachDetail 컴포넌트. 이 컴포넌트 안에 router-view를 추가해야한다.

이 router-view에 CoachDetail의 자식 라우트가 로딩된다.

지금은 이 contact 라우트가 유일한 자식 라우트이다.

//router.js
const router = createRouter({
  routes: [
    {
      path: '/coaches/:id',
      component: CoachDetail,
      props: true,
      children: [{ path: 'contact', component: ContactCoach }],
    },
  ],
});

 

 

그럼 ContactCoach.vue 페이지에도 더미 컨텐츠를 추가해보자.
"CONTACT A COACH"

 

그럼 /contact에 접속하면 이렇게 나타난다.

뒤에 /contact를 없애면 "CONTACT A COACH"가 나타나지 않는다.

'Contact'를 클릭해야 나타난다.

 

그럼 이제 모든 라우트로 연결할 수 있게 되었고,

각 페이지에는 더미 컨텐츠를 추가했다.

 

 

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