Vue router 개념 정리

클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다. URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다(SPA 언어의 큰 특징). 따라서 유연하게 페이지 전환이 가능하다. vue 프레임워크에서는 라우팅 라이브러리로 vue-router를 지원한다.

✨ Vue3 vue-router에서 Page not found 처리하기

예전에는 path: '*'로 작성하면 됐었지만 현재는 path: "/:catchAll(.*)"로 작성해야한다.

Router code splitting

프로젝트의 규모가 커질수록 JS 파일 용량도 커질 것이고, 용량이 커지면 인터넷이 느린 환경에서는 페이지 로딩 속도가 느려질 것이다. 지금 당장 필요한 코드가 아니라면 따로 분리시켜서(code splitting), 필요할 때만 불러와서 사용할 수 있다. 한개의 파일에서 처음부터 모든걸 불러오는게 아니라, 우리가 설정하는 대로, 라이브러리나 컴포넌트가 실제로 필요해질 때, 필요한 것을 나중에 불러오는 것 이다.

예시)

import { createRouter, createWebHistory } from "vue-router";


export default createRouter({
    history: createWebHistory(),
    routes: [
        { 
            path: '/', 
            redirect: {name: 'currentStatus'} 
        },
        {
            path: '/status', name: 'currentStatus',
            component: () => import('@/components/statistic/CurrentStatus.vue')
        },
        {
            path: '/board', name: 'boardList', 
            component: () => import('@/components/board/BoardList.vue'),
        },
    ],
});