[Udemy Vue 완벽가이드 Section16] 236. 라우트 등록하기

이제 코드를 작성해 볼 시간이다.

 

애플리케이션에 필요한 라우트와 페이지를 설정 → 필요한 핵심 컴포넌트를 구축 → 단계별로 필수적인 데이터와 기능을 추가.

 

가장 먼저 새 프로젝트에 필요한 두 개의 추가 패키지를 설치해보자.

vuex, router

npm install --save vue-router vuex로 두 패키지를 설치해보자.

 

 

src폴더 안에 router.js파일을 만들어, 여기에 모든 라우트와 라우팅 조직을 저장하여 main.js를 깔끔하게 해보자.

 

1/ 가장 먼저 vue-router로부터 createRouter함수를 불러오자.

createRouter를 호출해 router를 생성.

 

이 router를 다른파일, 주로 main.js파일에서도 사용할 수 있도록 export를 한다.

createRouter에 객체를 전달하고, 객체 내에 routes를 추가하면 된다.

 

routes 외에도 프로퍼티가 하나 더 있다. 바로, history.

이를 위해 Vue 라우터에서 또 다른 함수를 하나 더 불러오는데 바로 createWebHistory함수.

그리고 이 함수를 호출하고, 이 함수를 호출해서 얻은 값을 history프로퍼티 값으로 설정한다.

const router = createRouter({
  history: createWebHistory(),
});

 

 

routes 프로퍼티에는 라우트 배열을 추가.

원하는 라우트를 모두 설정해 둘 수 있다.

{ path: '/coaches', component: null } 추후에 추가해서 코치 컴포넌트를 가리키도록 설정하게 된다.

{ path: '/coaches/:id', component: null} 동적 코치 id가 경로의 일부분. 코치들의 상세정보를 표시하는 페이지로 이어지는 경로.

{ path: '/register', component: null} 코치로 등록을 하기 위한, 즉 코치로 가입하기 위한 라우트.

{ path: '/contact', component: null} 코치에게 연락하기 위한 라우트 필요. 

코치에게 연락을 하기 위해서는 코치의 id가 식별되어야 한다. 그러면 중첩 라우트를 사용해도 된다.

routes: [
  { path: '/coaches', component: null },
  {
    path: '/coaches/:id',
    component: null,
    children: [{ path: 'contact', component: null }], // /coaches/코치ID/contact 이렇게 로딩된다.
  },
  { path: '/register', component: null },
],

그러면 양식을 포함한 해당 코치에 대한 연락 페이지로 이동하게 된다.

따라서 { path: '/contact', component: null}  이건 지우자.

 

/requests 라우트 필요하다. contact 양식을 통해 전송된 메시지를 확인할 수 있는 페이지로의 라우트.

 

한가지 더 추가할 라우트가 있다.

바로 catch-all 라우트, 즉, notFound 라우트.

사용자가 경로에 인식할 수 없는 무언가 잘못된 것을 입력한 경우, Not Found 페이지를 표시하는 것.

여기에서는 동적 세그먼트를 사용하고, 뒤에 원하는 텍스트를 넣는다.

중요한 부분은 이 괄호 구문이다.

괄호 내부에는 정규 표현식이 들어가고, 여기에 무엇이 입력되었든 간에 이 notFound 라우트로 처리가 된다.

{ path: '/:notFound(.*)', component: null },

 

 

또 하나 추가해야할 라우트가 있다.

사용자가 '/'만을 입력했을 때에 해당하는 라우트. 도메인만 입력되는 경우도 있다.

도메인과 함께 '/'만 입력이 된 경우에는 /coaches로 리디렉트하자.

routes: [
  { path: '/', redirect: '/coaches' },
  { path: '/coaches', component: null },
  {
    path: '/coaches/:id',
    component: null,
    children: [{ path: 'contact', component: null }],
  },
  { path: '/register', component: null },
  { path: '/requesrts', component: null },
  { path: '/:notFound(.*)', component: null },
],

 

이제 이 페이지들, 즉 컴포넌트들을 구축해 이 라우트들을 통해 로딩이 되도록 만들자.

 

 

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