VueJS - 라우팅: Vue 앱에서 탐험하는 초보자 가이드
안녕하세요, 미래의 Vue 마스터 여러분! 오늘 우리는 Vue 라우팅의 세계를 함께 탐험할 여정을 시작할 것입니다. 라우팅은 Vue 애플리케이션의 GPS라고 생각해보세요 - 사용자들이 한 페이지에서 다른 페이지로 이동할 때 전체 웹사이트를 다시 로드할 필요 없이 이동을 도와줍니다. 멋지죠? 시작해보겠습니다!
Vue 라우팅이란?
당신이 집을 짓는다면 (당신의 Vue 앱), 손님들이 각 방으로 이동할 때마다 창을 통해 들어오도록 할 것인가요? 그런 일이 발생하지 않도록 라우팅이 필요합니다 - 앱의 각 방 사이에 적절한 문을 만드는 것입니다.
Vue Router는 Vue.js의 공식 라우팅 라이브러리입니다. 이를 통해 다양한 URL 경로에 컴포넌트를 매핑하여 원활한 단일 페이지 애플리케이션 경험을 제공합니다.
Vue Router 설정
먼저 Vue Router를 설치해보겠습니다. 터미널을 열고 다음 명령어를 실행하세요:
npm install vue-router이제 기본 라우터 설정을 만들어보겠습니다:
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
routes
})
export default router이 설정에서 우리는 Vue와 VueRouter를 import한 후 Vue에 VueRouter를 사용하도록 지정합니다. 라우트를 배열에 정의하며, 각 라우트는 경로, 이름, 그리고 렌더링할 컴포넌트를 지정합니다.
Router-Link와 Router-View 사용
이제 라우트를 설정했으니, 어떻게 사용할까요? <router-link>와 <router-view>를 사용하세요.
Router-Link
<router-link>는 사용자가 페이지 간 이동할 수 있게 해주는 컴포넌트입니다. 강력한 <a> 태그라고 생각해보세요. 다음과 같이 사용합니다:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>Router-View
<router-view>는 마법이 일어나는 곳입니다. 현재 URL과 일치하는 라우트의 콘텐츠를 표시하는 컴포넌트입니다. 컴포넌트가 렌더링될 플레이스홀더라고 생각해보세요.
Router-Link의 Props
<router-link>는 여러 가지 Props를 제공하여 행동을 커스터마이징할 수 있습니다. 가장 흔한 몇 가지를 살펴보겠습니다:
| Prop | 설명 | 예제 |
|---|---|---|
| to | 타겟 라우트 지정 | <router-link to="/about">About</router-link> |
| replace | 새로운 히스토리 엔트리를 추가하지 않고 이동 | <router-link to="/about" replace>About</router-link> |
| append | 현재 경로에 경로를 추가 | <router-link to="child" append>Child</router-link> |
| tag | 라우터 링크를 렌더링할 태그 지정 | <router-link to="/about" tag="li">About</router-link> |
| active-class | 링크가 활성화된 경우 적용할 클래스 | <router-link to="/about" active-class="active">About</router-link> |
| exact | 라우트를 정확히 일치시키기 | <router-link to="/" exact>Home</router-link> |
프로그래밍 방식 이동
occasionally, you might want to navigate from within your JavaScript code. Vue Router provides methods for this:
// About 페이지로 이동
this.$router.push('/about')
// 뒤로 가기
this.$router.go(-1)
// 현재 히스토리 엔트리를 교체
this.$router.replace('/about')동적 라우트 매칭
종종 같은 컴포넌트를 사용하지만 다른 매개변수를 가진 라우트를 매핑해야 합니다. 예를 들어, 사용자 ID가 URL의 일부인 사용자 프로필 페이지입니다. 이를 동적 세그먼트를 사용하여 달성할 수 있습니다:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})이 예제에서 :id은 동적 세그먼트입니다. 이를 컴포넌트에서 this.$route.params.id를 통해 접근할 수 있습니다.
내장 라우트
앱이 커지면서 각 컴포넌트를 안으로 넣고 싶을 수 있습니다. Vue Router는 이를 쉽게 만들어줍니다:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})이 설정은 /user/123/profile과 /user/123/posts와 같은 URL을 허용합니다.
导航守卫
마지막으로,导航守卫에 대해 이야기해보겠습니다. Vue Router가 제공하는 훅으로, 이동을 리디렉션하거나 취소하는 데 사용됩니다. 이들은 앱의 출입을 통제하는 보디가드와 같습니다.
다음은 간단한 전역 before 가드 예제입니다:
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})이 가드는 사용자가 인증되지 않은 경우 'Login' 라우트 외의 어떤 라우트로도 이동하지 못하도록 합니다.
그렇게 해서 끝입니다, 여러분! 우리는 Vue 라우팅의 기본을 탐험하는 여정을 함께 했습니다. 연습이 완벽을 만드는 것을 기억하고, 자신의 프로젝트에서 이 개념들을 실험해보지 마세요. 행복하게 코딩하시고, 여러분의 라우트가 항상 원하는 곳으로 안내해주기를 바랍니다!
Credits: Image by storyset