https://next.router.vuejs.org/installation.html#yarn

특정한 사이트를 만들 때 특정한 페이지를 구분하기 위해서 사용한다.
vue3 를 기반으로 만들기 때문에 router 또한 **vue-router next** 를 사용한다.

Rounter 는 실제로 웹페이지가 동작 할 때 같이 포함된다. 개발 의존성이 아닌 **일반 의존성**이다.
페이지를 관리 해 주는 용도이기 때문이다.

// use 는 현재 프로젝트에 특정한 plugin을 연결할 때 사용한다.

// main.js
import { createApp } from 'vue'
import App from './App'
import router from './routes/index.js'

createApp(App)
  .use(router)
  .mount('#app')

// 위에서 ./routes/index.js 라고 했으니까 routes 폴더를 만들고 그 안에
// index.js 를 만들어준다. index.js 는 main.js 에서 router 로 받아서 사용하게 된다.

// index. js
import { createRouter , createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

export default createRouter({
  // Hash or History. Hash 를 이용해서 project 진행한다.
  // <https://google.com/#/search>  # 이 붙는다.
  // 특정 페이지를 찾을수 없다는 메제시를 방지해준다.
  history: createWebHashHistory(),
  // pages 를 구분 한다.
  // path 가 '/' 인 것은 메인 페이지로 이동하겠다는 것이다. 그때 어떤 컴포넌트를
	// 연결해서 사용할 것인지를 명시 해준다.
  // <https://google.com/>
  routes: [
    {
      path: '/',
      component: Home
    },
    // <https://google.com/about>
    {
      path: '/about',
      component: About
    }
  ]

// default 로 작성되어 있던 App.vue 다 지워주고
// vue-router package 에서 제공하는 RouterView 는 전역화 되어있는 컴포넌트이다.
// Home 과 About page 가 이 RouterView 영역에서 출력이 된다.

// App.vue
<template>
  <RouterView />
</template>