<aside> 🧑‍💻

**Vue Router**는 Vuejs로 SPA를 구현할 때 사용합니다.

</aside>

🔹 Router

URL에 따라 어떤 View를 매핑하는 라이브러리

🔹 Route

URL에 대해 어떤 View를 표시하는 정보

🔷 Vue Router 설치

npm install vue-router

🔷 Vue Router 사용하기

🔹 View 생성

views 디렉토리를 생성하여 두 뷰를 만들게요

• views/HomeView.vue
• view/AboutView.vue

🔹 라우트 정보 매핑

router 디렉토리에 index.js만들어 설정합니다.

• index.js

  // 라우터 객체 생생성 *라우트 정보를 담고 있습니다.
  import { createRouter, createWebHistory } from 'vue-router'
  // 페이지를 가져옵니다.
  import HomeView from '@/views/HomeView.vue'
  import AboutView from '@/views/AboutView.vue'
  // routes 정보 설정
  // 배열 형태로 만들어 매핑 정보를 설정합니다.
  const routes = [
    {
      path: '/',           // '/'(루트)디렉토리로 접근 했을 때
      component: HomeView, // HomeView 컴포넌트를 보여주기
    },
    {
      path: '/about',
      component: AboutView,
    }, 
  ]
  // 라우터 객체 생성
  const router = createRouter({
    history: createWebHistory('/'),
    routes, // = routes: routes 키와 값이 같아 단축 표현
  				  // *routes라는 옵션에 위에어 생성한 routes를 넣어줍니다.
  })
  // router 객체를 외부에서 사용(import)할 수 있도록 export
  export default router
  

🔹 라우터 등록