Routing 사용 방법

1. 개인 공부 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

1. 라우팅이란?

1. Vue같은 SPA에서는 페이지를 이동할 때 마다 서버에 요청해서 페이지를 갱신하는 게 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 됩니다.
2. 즉, Vue에서 라우팅이라는 건 클라이언트에서 URL 주소에 따라 페이지가 전환되는 것을 의미합니다.
   1. Vue 프로젝트 내부에서는 미리 URL 주소를 정의하고 각 주소마다 Vue 페이지를 미리 연결시켜놓습니다.
   2. 그리고 해당 주소로 사용자의 요청이 들어왔을 때, 미리 정의된 URL 주소에 해당하는 뷰 페이지로 화면을 전환시켜줍니다.
3. 뷰에서 라우터는 path마다 해당하는 컴포넌트에 어떤 컴포넌트를 연결시켜줄지 정의합니다.

---

2. Vue 라우팅 사용예시

1. 아래 명령어만 입력하면 vue 프로젝트에 라우터 기본 설정이 추가됩니다.
2. 아래의 2-1부터 2-4까지의 과정은 라우터 설정이 어떤 컴포넌트로 이루어져있는지 살펴본 내용입니다.

$ vue add router

---

2-1. router/index.js

1. createRouter라는 function을 통해 라우터를 만들어줍니다. (router/index.js)

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

---

2-2. main.js

1. 이 라우터는 main.js에서 .use라는 키워드를 통해 사용합니다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'


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

---

2-3. App.vue

//...
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> //해당 컴포넌트를 찾아갑니다.
    <router-link to="/about">About</router-link> //해당 컴포넌트를 찾아갑니다.
  </div>
  <router-view/>
    //router-view 태그는 router-link가 컴포넌트를 찾아주면 여기에 컴포넌트가 로딩되게 합니다.  
</template>

---

2-4. router/index.js

1. router-link 태그는 아래 path에 매핑됩니다.

//...

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },  
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)