프로그레시브 자바스크립트 프레임워크 Vue를 위해 특별히 설계된 권한 있는 라우터인 Vue 라우터를 활용하면 단일 페이지 애플리케이션(SPA)을 쉽게 만들 수 있습니다. 이 강력한 도구를 사용하면 웹 애플리케이션 내의 각 구성 요소를 개별 브라우저 경로에 매핑하고 애플리케이션의 히스토리 스택 관리를 제어할 수 있을 뿐만 아니라 다양한 고급 라우팅 옵션을 설정할 수 있습니다.
Vue 라우터 시작하기
Vue 라우터 사용을 시작하려면 선택한 작업 영역에서 NPM(노드 패키지 관리자)을 사용하여 다음 명령을 실행하면 Vue 애플리케이션이 생성됩니다:
npm create vue
단일 페이지 애플리케이션 개발에 Vue 라우터를 통합할지 여부에 대한 요청을 받으면 긍정적으로 대답하는 것이 좋습니다.
원하는 텍스트 편집기에서 프로젝트를 열 때 src 디렉터리에 라우터 폴더가 포함되어 있는지 확인하십시오.
라우터 폴더에는 애플리케이션 내 라우팅과 관련된 자바스크립트 코드가 포함된 index.js 파일이 포함되어 있습니다. 이 index.js 파일에는 vue-router 패키지에서 파생된 두 가지 함수인 createRouter와 createWebHistory가 포함되어 있습니다.
`createRouter` 함수는 두 가지 중요한 요소, 즉 `history` 및 `routes` 속성을 포함하는 객체를 활용하여 새로운 경로 구성을 생성합니다. 이러한 속성은 앞서 설명한 그림에서 볼 수 있듯이 각 개별 경로의 사양에 대한 세부 정보를 포함하는 배열과 연관되어 있습니다.
라우팅 구성이 수행되면 라우터 인스턴스를 내보낸 다음 main.js 파일로 가져와야 합니다.
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
앞서 언급 한 프로세스에는 라우터 모듈의 활용이 포함되었으며, 이후 main.js 파일에 통합 된 후 `사용` 메서드의 구현을 통해이 라우터 모듈을 사용하도록 Vue 애플리케이션이 구성되었습니다.
Vue.use(라우팅)
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header>
<RouterView />
</template>
이전 코드 샘플은 vue-router 라이브러리에서 라우터링크와 라우터뷰라는 두 가지 컴포넌트를 가져와서 Vue 컴포넌트 내에서 Vue 라우터를 활용하는 방법을 보여줍니다.
앞서 언급한 코드 스니펫에는 각각 홈 페이지 및 정보 페이지와의 연결을 설정하는 두 개의 라우터 링크 구성 요소가 포함되어 있습니다. 이러한 연결은 각 링크를 클릭할 때 탐색할 특정 경로를 나타내는 “to” 속성을 사용하여 설정됩니다. 이러한 링크 중 하나는 “/” 기호로 표시된 루트 경로로 사용자를 안내하고 다른 하나는 “/정보” 경로로 연결합니다.
이 컴포넌트는 현재 경로의 콘텐츠를 호스팅하기 위한 적응형 그릇 역할을 합니다. 사용자가 다양한 경로를 탐색할 때 구성 요소는 프레임워크 내에서 해당 디스플레이를 수용합니다.
애플리케이션의 경로에 매개변수 추가하기
Vue 라우터를 사용하면 매개변수와 쿼리 변수를 경로에 전달할 수 있습니다. 매개변수는 콜론으로 표시된 URL의 유연한 구성 요소를 나타냅니다.
Vue 애플리케이션 내에서 특정 경로에 대한 매개변수 추적을 활성화하려면 프로젝트의 index.js 파일에 필요한 구성을 지정해야 합니다.
//index.js
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
앞서 언급한 코드 디스플레이는 “홈”과 “개발자”로 지정된 두 개의 경로를 포함하는 라우터의 인스턴스화를 보여줍니다. 후자의 경로는 특정 개발자의 프로필 번호와 관련된 데이터를 제공하도록 장착되어 있습니다.
可以将上面的 `App.vue` 파일 수정:
<!-- App.vue -->
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script>
<template>
<header>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header>
<RouterView />
</template>
앞서 언급한 코드 스니펫은 이름과 프로필이라는 두 가지 속성을 포함하는 반응형 객체로 Developer 변수를 설정합니다. 그 후 라우터링크의 두 번째 인스턴스는 사용자를 devView 컴포넌트로 안내합니다. 이 시점부터 devView 컴포넌트의 템플릿 또는 자바스크립트 섹션에서 URL 내에 전달된 매개변수 값을 얻을 수 있습니다.
devView 컴포넌트의 템플릿 블록 내에서 값을 검색하기 위해 Vue는 전체 경로, 쿼리 매개변수 및 컴포넌트를 포함하여 URL의 특성에 대한 세부 정보를 지정하는 속성을 가진 객체를 제공하는 $route 메서드의 활용을 제공합니다.
<!-- devView.vue -->
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
앞서 언급한 코드 세그먼트는 $route 프로토콜을 활용하여 컴포넌트의 HTML 템플릿 내에서 profileNumber 변수의 값에 액세스하고 표시하는 방법을 보여줍니다.
`$route` 메서드 내의 `params` 속성은 경로에 설정된 매개변수를 포함합니다. Vue에서 컴포넌트를 렌더링할 때 `$route.params.profileNumber`의 값을 URL에 제공된 실제 값으로 대체합니다.
URL “/developer/123″을 방문하면 “이것은 개발자 123의 정보 페이지입니다.”라는 메시지가 표시됩니다.
앞서 언급한 정보는 다음 코드 스니펫에 예시된 것처럼 컴포넌트의 JavaScript 섹션 내에서 검색할 수 있습니다:
<!-- devView.vue -->
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
이전 구현에서는 경로 매개변수를 추출하기 위해 템플릿 내의 `$route` 객체에 직접 액세스해야 했습니다.이와는 대조적으로, 수정된 접근 방식은 `vue-router` 패키지에서 `useRoute()` 함수를 가져와서 나중에 Vue 구성 요소의 템플릿 내에서 활용되는 변수에 할당하는 것을 수반합니다.
`useRoute()` 함수를 활용하면 경로 매개변수가 변경될 때 구성 요소가 자동으로 업데이트되도록 반응형 시스템을 사용하는 Vue 3에서 옹호하는 구성 패턴을 채택할 수 있습니다.
애플리케이션의 경로에 쿼리 추가
쿼리 매개변수라고도 하는 쿼리 문자열은 기호 “?” 다음에 오는 유니폼 리소스 로케이터(URL) 내에 포함할 수 있는 선택적 요소입니다. 이 문자열에는 각 키-값 쌍이 앰퍼샌드(“&”) 문자로 구분된 데이터가 포함됩니다. 예를 들어 “/search?name=vue” 경로를 살펴보면, “name=vue”는 샘플 쿼리 문자열을 구성하며, “name”은 키워드 역할을 하고 “vue”는 해당 값으로 사용됩니다.
라우터링크 컴포넌트 내에서 쿼리 속성을 활용하면 Vue 라우터의 지정된 경로에 검색어를 추가할 수 있습니다. “to” 객체에 내재된 이 속성은 검색 쿼리의 매개변수 역할을 하는 키-값 쌍으로 구성됩니다. 이 구현의 예시적인 인스턴스는 다음과 같습니다:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Vue 컴포넌트의 경로 내에 쿼리를 통합할 때 $route 객체를 사용하거나
쿼리 매개변수는 서버에서 특정 정보를 검색하는 데 사용되는 데이터가 포함된 URL의 일부입니다. 컴포넌트 태그 내에서 한 페이지에서 다른 페이지로 값과 매개변수를 전달하는 데 활용할 수 있습니다. 예를 들어 사용자 프로필
<!-- HomeView.vue -->
<template>
{{ $route.query.name }}
</template>
본 코드 세그먼트는 Vue.js 컴포넌트의 템플릿 내에서 `$route.query` 객체를 활용하여 URL 쿼리 매개변수(“name”)의 값을 검색하고 표시하는 기술을 보여 줍니다.
폴백 정의(404) 페이지
Vue 라우터를 사용하면 앞의 경로 중 어느 것도 유니폼 리소스 로케이터(URL)를 처리하기에 적절하지 않은 경우 최상의 대안으로 간주되는 기본 경로를 지정할 수 있습니다. 이 조항은 이러한 상황이 발생할 경우 404 상태 코드가 있는 “찾을 수 없음” 웹 페이지를 표시하기 위한 목적으로 사용됩니다.
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
“/:경로 이름” 구성 요소는 URL의 동적 부분을 나타내며 “(. *)”는 변수 세그먼트 다음에 나오는 모든 문자를 캡처하는 JavaScript 정규식입니다. 이렇게 하면 경로가 모든 트레일과 일치할 수 있습니다.
사용자가 애플리케이션에서 정의된 경로 중 하나에 해당하지 않는 웹페이지를 발견하면 Vue는 NotFoundView 컴포넌트를 표시하는 동작을 나타냅니다. 이 방법론은 404 오류를 해결하거나 원하는 콘텐츠를 찾을 수 없을 때 기본 페이지를 표시하는 효과적인 수단으로 사용됩니다.
Vue에서 애니메이션 만들기 배우기
또한 웹 애플리케이션 라우팅 시스템의 다양한 측면을 구성하는 복잡성에 노출되었습니다. 여기에는 정의된 경로 내에서 매개변수화 및 검색 쿼리를 구현하는 방법에 대한 학습이 포함되었습니다. 또한 404 오류와 같은 실패한 요청을 처리하기 위해 기본 페이지를 지정하는 프로세스에 익숙해졌습니다. 이 강의는 Vue 라우터의 기능에 대한 입문 강의에 불과하지만, 동적 및 계층적 경로 설정을 비롯한 전체 기능을 탐색하는 데 탄탄한 기초가 됩니다.
웹 페이지 구성 요소 간에 애니메이션 및 전환 효과를 통합하면 사이트와 사용자의 상호 작용을 크게 개선할 수 있습니다. 보다 매끄럽고 매력적이며 전반적으로 우수한 웹 사이트를 만들려면 Vue를 사용하여 전환 및 애니메이션을 만드는 방법을 숙달하는 것이 중요합니다.