[vue.js] Router

0. 목적

-. vue3의 router 기능 습득

1. Routing

-. Routing은 uri 엔드포인트에 대해 각기 다른 결과물(페이지)를 보여주는 것인데, vue.js에서는 그 routing을 i) server-side routing과 ii) front-side routing으로 나눠서 다룬다.

i) server-side routing

-. 간단히 말해서 각 endpoint에 대해 서버에서 매번 페이지를 보내주는 것. 내가 이전에 flask로 게시판 만든다고 삽질할 때 사용하던 routing이 바로 server-side routing.

ii) front-side routing

-. 이것땜에 갑자기 vue를 공부하겠다고 재삽질을 하는건데, vue는 한번 로딩을 하고 나면 그 뒤로는 서버에 최소한의 데이터만을 요청(주로 axios로)하게 된다. 한번 딱 로딩 한 후에는 데이터만 요청하게 된다는 것이고... 바꿔얘기하면, 내가 front-end app을 만들 때 모바일앱/웹앱을 구분해서 만들 필요 없이 api 서버만 꾸려놓고 view만 바꿔가면서 사용할 수 있다는 것이다.

2. 예시

1) server-side routing

-. 파이썬 코드랑 비슷해 보이는데, vue-cli를 통해 자동 생성된 코드다. 

-. 아래 예시에서는 '/' 과 '/about' 각각에 대해 서버에 요청을 하여 결과를 받게 된다. 

-. '/about' path의 컴포넌트는 import 구문이 존재하지 않는다. call이 발생하면 그 순간 컴포넌트를 받아오게 된다.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

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')

  }
]

2) front-side rendering

-. 아래와 같이, '/about' path의 component를 import 선언을 해주면, 첫 페이지를 로딩할 때 컴포넌트를 전달받아 시작하게 된다. 이 경우, '/' 첫 진입 시 로딩이 두배로 걸리지만, 이후 '/about' 진입 시엔 서버와의 응답 절차 없이 바로 진입할 수 있다.

import { createRouter, createWebHistory } from 'vue-router'
import EventList from '../views/EventList.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'EventList',
    component: EventList
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router