[Vue] Router

SPA routing

Vue는 대표적인 SPA를 구현하는 프레임워크 중 하나입니다. SPA Single Page Application 즉 단일 페이지 어플리케이션 패러다임입니다. SPA를 사용하면 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있습니다. (<-> SSR(서버 사이드 렌더링, 브라우저는 서버가 응답한 html을 받아 렌더링, 전체 페이지를 렌더링하므로 새로고침 발생)

Routung은 사용자가 어떤 화면에서 다른 화면으로 전환하는 기능을 의미한다. 사용자가 요청한URL 또는 이벤트를 해석하고 새로운 페이지를 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를전환하는 일련의 행위이다.

vue-router 설치

npm install vue-router

router.js 설치

path마다 다른 component를 보여주기 위해서는 router 설정이 필요합니다.

src 폴더 하위에 routes 폴더를 생성하고 index.js를 생성합니다. 우리는 router를 세팅하도록 하겠습니다.

import {createWebHistory, createRouter} from "vue-router";
import Content from "@/components/Content";
import Error from "@/components/common/Error";

const routes = [
    { /* Main Page */
        path: "/",
        component: Content
    },
    { /* Error Page*/
        path: "/error",
        component: Error
    },
    { /* Router에 등록되지 않은 URI 요청의 경우 404로 redirect */
        path: '/:pathMatch(.*)*',
        redirect: "/error"
    },
];

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

export default router;

기본적인 router를 설정했으면 main.js로 이동해 Vue에서 라우터를 사용할 수 있도록 등록하도록 하겠습니다.

import router from "./routes/index.js";
...
app.use(router);

Vue Router 옵션

우리는 라우터를 사용할 때 특정 옵션을 선택할 수 있습니다. routes는 URL과 그에 매칭되는 Component를 작성하게 됩니다. path와 redirect를 설정할 수 있습니다.

router-view

브라우저의 URL이 변경되면 앞서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려지게 됩니다. 이때 부려지는 지점을 router-view로 지정할 수 있습니다.

<div>
	<router-view></rotuer-view>
</div>

router-view 태그만 넣어도 해당 URL과 일치하는 컴포넌트를 로드하게 됩니다.

router-link

만약 특정한 페이지로 이동하게 하고 싶을 때는 router-link를 사용합니다.

<router-link to="이동할 URL"></router-link>
<router-link to="/login"></router-link>

router-link는 화면에서 a태그로 변형되어 나오게 됩니다.