인프런 짐코딩을 수강 후, 강의 내용을 바탕으로 공부한 내용을 정리한 글입니다.

뷰 라우터

뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 Vue.js의 공식 라우터 입니다. URL을 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리로, 기본 세팅이 된 Vue 프로젝트를 아래와 같이 수정해 실습해 보겠습니다.

/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

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

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

export default router

router는 이렇게 작성하였습니다.

main.js

import 'bootstrap/dist/css/bootstrap.min.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

createApp(App).use(router).mount('#app')
import 'bootstrap/dist/js/bootstrap.js'

작성한 router를 import하고 createApp(App).use(router).mount('#app')로 라우터를 호출합니다. 이렇게 호출함으로써 모든 자식 컴포넌트에서 router, route 같은 객체를 사용할 수 있게 됩니다.

// HomeView.vue
<template lang="">
	<h2>Home View</h2>
</template>
<script>
export default {}
</script>
<style lang=""></style>

// AboutView
<template lang="">
	<h2>About View</h2>
</template>
<script>
export default {}
</script>
<style lang=""></style>

App.vue에서는 노출할 컴포넌트를 두 가지 만들었습니다. URL이 변함에 따라 헤더 영역은 변하지 않고, TheView 영역에만 변화를 가하기 위함입니다.

<script setup>
import TheHeader from '@/layouts/TheHeader.vue'
import TheView from '@/layouts/TheView.vue'
</script>
<template>
	<TheHeader />
	<TheView />
</template>
<style lang=""></style>

TheView.vue

<template lang="">
	<main>
		<div class="container py-4">
			<RouterView></RouterView>
		</div>
	</main>
</template>
<script>
export default {}
</script>
<style lang=""></style>

RouterView를 이용해 URL이 변할 때 노출될 View의 위치를 지정합니다.

각각 /와 /about에 접근 시 화면이 다르게 나타나는 것을 볼 수 있습니다.

---

RouterLink

상단 네비게이션 바의 메뉴를 클릭하여 페이지를 전환하는 방법을 배워보겠습니다.

TheHeader.vue

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
	<li class="nav-item">
		<RouterLink class="nav-link active" to="/">Home</RouterLink>
	</li>
	<li class="nav-item">
		<RouterLink class="nav-link" to="/about">About</RouterLink>
	</li>

	<li class="nav-item">
		<a class="nav-link active" aria-current="page" href="/">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="/about">About</a>
	</li>
</ul>

TheHeader.vue의 코드 일부를 위와 같이 수정하여, 상단 네비게이션 바 클릭 시 /와 /about간 이동이 가능하도록 코드를 작성했습니다.
RouterLink를 사용하는 것과 a 태그의 href를 사용하는 것에는 어떤 차이가 있을까요?

vue-router를 사용하는 경우, RouterLink는 페이지 새로고침 없이 애플리케이션 내에서 경로를 변경합니다. 즉, 브라우저의 히스토리 상태를 변경하면서도 페이지를 다시 로드하지 않고 필요한 컴포넌트만 변경해 성능을 최적화합니다. a 태그를 이용하면 일반적인 HTML 링크처럼 동작하며, 클릭할 경우 전체 페이지를 새로고침하게 됩니다. 페이지가 완전히 다시 로드되므로 SPA의 장점을 활용할 수 없게 됩니다.

---

$route 내장객체

<template lang="">
	<h2>Home View</h2>
	<div>{{ $route }}</div>
</template>
<script>
export default {}
</script>
<style lang=""></style>

HomeView를 이렇게 수정하면

화면에 이런 정보가 출력됨을 확인할 수 있습니다.

• path: 현재 페이지의 경로를 나타냅니다.
• name: 현재 활성화된 라우트의 이름입니다. 만약 라우트를 설정할 때 name 속성을 지정했다면, 여기서 그 이름을 확인할 수 있습니다.
• hash: 현재 URL에 포함된 해시(#) 값입니다. 예를 들어 /#section2에서 해시 값은 #section2가 됩니다.
• params: 경로에 설정된 동적 파라미터(URL 파라미터)를 포함합니다. 예를 들어 :id 같은 경로 파라미터가 있는 경우 params에 해당 값이 담깁니다.
• query: URL에 포함된 쿼리 문자열을 담고 있습니다. 예를 들어 /about?category=books와 같은 URL에서 query는 { category: "books" } 형태로 반환됩니다.
• fullPath: 쿼리 문자열 및 해시를 포함한 전체 경로입니다. 즉, URL의 모든 요소를 합친 완전한 경로가 반환됩니다.
• matched: 현재 경로와 매칭된 라우트 객체들의 배열입니다. 이 배열은 현재 경로와 일치하는 라우트들을 담고 있습니다. 중첩된 라우트가 있을 경우 여러 개의 라우트가 포함될 수 있습니다.
• meta: 라우트 설정에서 정의한 메타 정보를 담고 있습니다. 보통 인증, 권한, 제목 등과 같은 추가적인 정보를 라우트에 포함할 때 사용됩니다.
• redirectedFrom: 만약 현재 경로가 다른 경로로부터 리다이렉트 된 경우, 원래의 경로 정보를 포함합니다. 리다이렉트 전의 경로를 확인할 때 유용합니다.
• meta: 라우트에 메타 정보를 설정할 때 사용됩니다. 예를 들어 페이지의 인증 여부나 권한 등에 대한 정보를 담을 수 있습니다.

template 내부에서는 $route로 사용 가능하고, setup 함수 내에서는 useRoute를 import 하여 라우터에 대한 정보를 확인할 수 있습니다.

<template lang="">
	<h2>Home View</h2>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('route', route.path)
</script>
<style lang=""></style>

---

route를 이용해서 예시 1, 2처럼 화면 이동도 가능합니다.

예시1

<template lang="">
	<h2>About View</h2>
	<button class="btn btn-primary" @click="$router.push('/')">
		Home으로 이동
	</button>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('route', route.path)
</script>
<style lang=""></style>

예시2

<template lang="">
	<h2>Home View</h2>
	<button class="btn btn-primary" @click="goAboutPage">About으로 이동</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goAboutPage = () => {
	router.push('/about')
}
</script>
<style lang=""></style>

---

추가로

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

active-class="active" 라고 속성을 추가하면 a 태그가 활성화 상태일 때 어떤 클래스를 부여할 것인지 지정할 수 있습니다. 위 예시에서는 활성화 상태일 때 active 클래스가 부여됩니다(active-class를 지정하지 않으면 "router-link-active"라는 클래스가 부여됩니다).