SPA라고 한다면 라우팅이라는게 매우 중요합니다. 그래서 오늘은 라우팅이란 무엇이고, Vue router는 무엇이고 어떤 기능이 있는지 알아보겠습니당
1. 라우터란?
라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치에요. 오늘 정리할 뷰에서의 라우터는 URL에 따라 어떤 페이지를 보여줄 지 매핑하는 라이브러리에요.
예를 들면 '/user'라는 경로의 요청이라면 UserView.vue 컴포넌트를 렌더링하는 역할을 라우터가 수행해주는거에요. 그리고 이때 '/user' -> 'UserView.vue' 라는 매핑 정보고 라우트입니다!
2. Vue router 설치하기
Vue router는 아래 명령으로 설치가 가능해요.
npm install vue-router@4yarn add vue-router@43. Vue router 설정하기
가장 먼저 UserView.vue와 DashBoardView.vue라는 두 페이지를 생성해볼게요.
// src/views/UserView.vue
<script><script>
<template>
<h1>UserView</h1>
</template>// src/views/DashBoardView.vue
<script><script>
<template>
<h1>DashBoardView</h1>
</template>두 페이지를 만든 후 라우트를 정의해보겠습니다.
// src/router/index.js
import UserView from '@/views/UserView.vue';
import DashBoardView from '@/views/DashBoardView.vue';
const routes = [
{
path: '/user',
name: 'user',
component: UserView,
},
{
path: '/dashboard',
name: 'dashboard',
component: DashBoardView,
},
];그 다음으로는 라우터를 설정해볼게요.
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import UserView from '@/views/UserView.vue';
import DashBoardView from '@/views/DashBoardView.vue';
const routes = [
{
path: '/user',
name: 'user',
component: UserView,
},
{
path: '/dashboard',
name: 'dashboard',
component: DashBoardView,
},
];
const router = createRouter({
history: createWebHistory('/'),
routes,
});
export default router;이 때 createRouter를 통해 라우터를 설정하게 되는데, 주목해야할 부분은 createWebHistory 입니다
Vue router - 다양한 히스토리 모드
라우터 인스턴스를 생성할 때 history 라는 옵션을 사용해서 다양한 히스토리 모드중에 하나를 적용할 수 있어요. 모드는 총 3개에요.
해시모드
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})해시모드는 createWebHashHistory() 를 사용해 적용해요. 내부적으로는 전달되는 실제 URL 앞에 해시문자(#)를 사용해요. URL의 이 섹션은 서버로 전성되지 않으므로 서버의 특별한 조치가 필요하지않지만, SEO에 나쁜 영향을 미쳐서 이 부분이 문제가 된다면 HTML5 모드를 사용해야해요.
- 왜 SEO에 나쁜 영향을 미치나요!?🤔
보통 #는 특정 페이지를 가리키는게 아니라 한 페이지 내의 스크롤 하기 힘든 부분을 찾아갈 때 사용해요. 그렇기 때문에 검색엔진은 이를 페이지라고 인식하지않기에 SEO에 좋지않아요 😂
그렇기 때문에 배포는 createWebHistory로 주로 한다고 해요!
HTML5 모드
HTML5 모드는 공식문서에서 권장하는 모드에요.
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
Vue는 클라이언트 사이드 SPA 이므로 용자가 브라우저에서 바로 https://example.com/user/id에 접근하면 404 오류가 발생해요. 이러한 문제를 해결하려면 서버에 간단한 포괄 대체 경로를 추가하기만 하면 돼요. URL 접근이 배포된 정적 자산과 일치하지 않으면, 앱의 index.html 페이지를 제공해야 해요.
메모리 모드
메모리 모드는 브라우저 환경을 고려하지 않아요. 따라서 URL과 상호작용하지 않고, 자동으로 네비게이션 초기화를 트리거하지 않아요. 이것은 Node.js 환경의 SSR에 완벽해요. createMemoryHistory()를 사용하여 적용하며, app.use(router)를 호출한 후 반드시 네비게이션 초기화를 해야 해요.
import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({
history: createMemoryHistory(),
routes: [
//...
],
})브라우저에서 이 모드를 사용할 수는 있지만 히스토리가 없으므로 권장되지않아요. 즉, '뒤로', '앞으로' 이동할 수 없어요!
4. Vue router 사용해보기
어떠한 버튼을 눌렀을 때 '/user'라는 경로로 가고 싶다면 어떻게 코드를 작성하면 될까요?
<router-link :to="/user"> </router-link>이렇게 를 사용할 수 있어요.
또는
rotuer.push('/user');이렇게 새 항목을 히스토리 스택으로 푸시할 수 있어요.
만약, 현재 위치를 바꾸고 싶다면 어떻게 할 수 있을까요
<router-link :to="/user" replace> </router-link>이렇게 replace라는 키워드를 적거나
router.push({ path: '/home', replace: true })
// 이 둘은 동일함.
router.replace({ path: '/home' })직접 router.push에 전달할 수 있어요.
5. Vue router 에 속성 전달하기
컴포넌트에서 $router 를 사용하면 특정 URL에서만 사용할 수 있기에 컴포넌트와 라우트간의 강한 결합이 생기게 되어 컴포넌트의 유연성을 제한하게 돼요. 그래서 이를 props 옵션으로 분리할 수 있어요.
// 라우트에 의존된 컴포넌트
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]// 라우트 의존도 해제
const User = {
// make sure to add a prop named exactly like the route param
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]Boolean 모드
props를 true로 설정하면 route.params가 컴포넌트 props로 설정돼요.
객체 모드
props가 객체인 경우, 이는 그대로 컴포넌트의 props로 설정돼요. Props가 정적일 때 유용해요.
const routes = [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]함수 모드
Props를 반환하는 함수를 만들 수 있어요. 이를 통해 파라미터를 다른 유형으로 캐스팅하고, 정적 값을 경로 기반의 값과 결합하는 등의 작업을 수행할 수 있어요.
const routes = [
{
path: '/search',
component: SearchUser,
props: route => ({ query: route.query.q })
}
]/search?q=vue는 SearchUser 컴포넌트의 props로 { query: 'vue' }를 전달해요.
경로가 변경될 때만 props를 정의하는 함수가 평가되므로, 상태가 변경될 때도 반응하는 props를 전달하려면, 함수 내부에 상태를 사용하는 대신, 래퍼 컴포넌트를 사용해 계산된 속성(computed)을 props로 전달해야 해요.
이렇게 Vue의 라우팅에 대해 알아봤어요! 🙂 🙂
6. 참고
