Vue3 - 뷰 라우터 Vue Router

뷰 라우터에 대한 개념은 인터넷에 널리고 널렸으며 Vue.js를 해본 사람들은 익혀있으니 개념 설명 따위는 스킵하고 적용과 사용법을 익혀본다.

우선 기존의 프로젝트에서 src/views 디렉토리를 생성하고, HomeView.vue 와 AboutView.vue를 만들어둔다.

<script setup></script>

<template>
    <div>
        <h2>Home View</h2>
    </div>
</template>

<style scoped></style>

이런식으로-

Vue Router 설정

모듈 설치 (v4.x 이상)

npm i vue-router

그리고 src/router 경로를 만들고 index.js를 만든다.

만들어 둔 페이지 컴포넌트를 불러오고, routes 배열에 담아 객체를 만들어 해당 페이지에 대한 정보와 페이지 컴포넌트를 담아둔다.

그 다음, vue-router모듈을 이용해 createRouter(), createWebHistory() 메소드를 사용한다.

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

import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'About',
        component: AboutView
    }
];

const router = createRouter({
    history: createWebHistory('/'),
    routes
});

export default router;

main.js에 router/index.js에 export한 "router"를 가져오고, 인스턴스 생성할 때 .use()메소드를 사용한다.

import router from '@/router';

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

추가되는 페이지는 router/index.js에 저러한 방식으로 객체를 만들어두면 라우터가 연결된다.

여기까지 설정 끝.

이제 layouts/TheView.vue에다 요청 URL에 맞게 라우터 페이지 컴포넌트를 랜더링할 수 있도록 수정해야 한다.

RouterView라는 태그를 사용하면 해당 영역에 페이지 컴포넌트가 렌더링된다.

<div class="container py-4">
  <RouterView></RouterView>
</div>

여기까지 Vue Router에 대한 설정과 사용법은 끝났고, Navbar UI 요소에 라우터 액션이 취해지도록 자잘한 수정한다.

TheHeader.vue 컴포넌트에 <a>태그로 링크를 이동시키려던 것들을 이제 vue-router에 맞게 사용한다.

<li class="nav-item">
  <RouterLink class="nav-link" to="/">Home</RouterLink>
</li>
<li class="nav-item">
  <RouterLink class="nav-link" to="/about">About</RouterLink>
</li>

테스트를 한다면 <a>앵커 태그는 이동 시 페이지가 리로딩 된다. Vue Router 방식을 이용하면 SPA에 맞게 리로딩 되지않고 페이지가 렌더링 된다.