💻Vue Router

뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터다. Vue Router 공식문서

💡 라우터(Router)란?

라우터는 일반적으로 네트워크간에 데이터를 전송하는 장치를 말한다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 보면 된다. 예를 들어 " /home 경로로 요청이 왔을 때 Home.vue 컴포넌트를 화면에 렌더링 해라" 라는 역할을 수행하는 라이브러리라고 생각하면 된다. 그리고 이때 /home -> Home.vue 이러한 매핑정보를 라우트(Route)라고도 한다.

라우트(Route)란?

• 어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보

설치

npm install vue-router

1-1. 페이지 컴포넌트 생성

HomeView.vue와 AboutView.vue 페이지(컴포넌트)를 생성한다. 경로는 root에 폴더를 만들어 넣어준다 src/views/

HomeView.vue

src/views/HomeView.vue

<template>
	<div>Home view</div>

</template>

<script setup>
</script>

<style lang="scss" scoped></style>

AboutView.vue

src/views/AboutView.vue

<template>
	<div>About View</div>
</template>

<script setup>
</script>

<style lang="scss" scoped></style>

1-2. 라우터(router) 설정

index.js

// src/router/index.js

//라우트 정보를 담고 있는 라우터 객체를 생성
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

//router설정
const routes = [
	{
		path: '/', //root로 들어왔을 때
		name: 'Home',
		component: HomeView,
	},
	{
		path: '/about', //about로 들어왔을 때
		name: 'About',
		component: AboutView,
	},
];

//라우터 객체 생성
const router = createRouter({
	history: createWebHistory('/'),
	routes, // 키와 값이 같으면 값을 빼고 적어도 됨
});

//생선된 router 객체를 외부에서 사용할 수 있도록 export
export default router;

설정한 라우터 객체를 Vue 인스턴스에 추가해보자

main.js

// src/main.js

//bootstrap 설치 후 import
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

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

//router/index.js에서 설정한 router 객체를 가져옴
import router from '@/router';

//use 메서드를 통해서 설정한다.
createApp(App).use(router).mount('#app');
import 'bootstrap/dist/js/bootstrap.js';

app.use(router)를 호출 함으로써 컴포넌트 내부에서 $router, $route 객체에 접근할 수 있다.

RouterLink, RouterView

RouterLink

Vue Router 에서는 페이지를 이동할 때는 일반 a태그를 사용하는 대신 커스텀 컴포넌트인 <RouterLink>를 사용하여 다른 페이지 링크를 만들어야 한다. 이를 통해 Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링 할 수 있다.

RouterView

<RouterView>는 URL에 매핑된 컴포넌트를 화면에 표시한다.

push, replace

router.push와 같은 역할을 하지만 유일한 차이는 새로운 히스토리 항목에 추가하지 않고 탐색한다는 것이다. 이름에서 알 수 있듯이 현재 항목을 대체한다.

// router.push 메소드에 replace: true 속성을 추가하여 동일하게 동작 시킬 수 있다.
router.push({ path: '/home', replace: true})
// equivalent to
router.replace({ path: '/home'})