128. Creating Routes

npm create vue@latest


이 강의에서는 라우트 생성하기

  • 이전 강의에서 검토한 router 파일 작업을 진행합니다.
  • 라우트 설정은 routes라는 변수에 저장됩니다.
  • Vue 라우터는 객체의 배열을 예상합니다. 각 객체는 루트 기록입니다.

새로운 루트 기록 추가하기

  • 홈페이지를 위한 루트를 생성합니다. ({path: '/', component: 'Home'})
  • 사용자가 애플리케이션을 방문할 때 라우터는 URL에서 경로를 검색하여 등록된 레코드와 일치시킵니다.
  • 일치하는 경우 관련 컴포넌트를 로드합니다.

라우터가 컨텐츠를 표시할 위치 지정하기

  • router-view 컴포넌트를 사용하여 라우터에게 컨텐츠 로드 위치를 지시합니다.
  • 이 컴포넌트는 Vue 라우터 모듈을 플러그인으로 등록할 때 정의되었습니다.
  • 라우터는 생성한 루트 레코드를 바탕으로 어떤 컴포넌트를 로드할지 자동으로 알게 됩니다.

애플리케이션 브라우저에서 테스트하기

  • 페이지는 정상적으로 렌더링됩니다.
  • 콘솔에서 에러를 확인하여 라우터가 원하는 대로 작동하는지 확인합니다.
  • 다른 라우트들도 작동하는지 검토합니다.
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: HomeView
  },
  {
    path: '/about',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router