1.라우팅이란?
웹페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 SPA(Single Page Application)에서 주로 사용하고 있다. 라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 UX를 향상시킬 수 있다.
일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만 아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다.
2.뷰 라우터
뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. 뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 다음과 같다.
<router-link to="URL 값"> // 페이지 이동 태그. 클릭하면 지정한 URL로 이동
<router-view> // 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 <body>
<div id="app">
<p>
<router-link to="/main">Main 컴포넌트로 이동</router-link>
<router-link to="/login">Login 컴포넌트로 이동</router-link>
<!-- URL 값을 변경하는 태그 -->
</p>
<router-view></router-view> <!-- URL 값에 따라 갱신되는 화면 영역 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> <!-- 라우터 CDN 추가 -->
<script>
var Main = { template: '<div>main</div>' };
var Login = { template: '<div>Login</div>' };
// Main, Login 컴포넌트 정의
var routes= [
{ path: '/main', component: Main },
{ path: '/login', component: Login }
];
// 각 URL에 맞춰 표시할 컴포넌트 지정
var router = new VueRouter({
routes
})
// 뷰 라우터 정의
const app = new Vue({
router
}).$mount('#app')
// 뷰 인스턴스에 라우터 추가
</script>
</body>- $mount() API는 el속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있다. 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내하고 있다.
- 뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드를 활용하면 된다.
<script>
var router = new VueRouter({
mode: 'history',
routes
)};
</script>3.네스티드 라우터
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 네스티드라는 단어에서 추측할 수 있듯이 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 아래와 같이 구성한다.
<body>
<div id="app">
<router-view></router-view> <!-- URL 값에 따라 갱신되는 화면 영역 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> <!-- 라우터 CDN 추가 -->
<script>
const User = {
template:`
<div>
User Component
<router-view></router-view>
</div>
`
};
const UserProfile = { template:'<p>User Profile Component</p>' };
const UserPost = { template: '<p>User Post Component</p>' };
// 컴포넌트 내용 정의
var routes= [
{
path: '/user',
component: User,
children:[
{
path: 'posts',
component: UserPost
},
{
path: 'profile',
component: UserProfile
},
]
},
];
// 네스티드 라우팅 정의
const router = new VueRouter({
routes
})
// 뷰 라우터 정의
const app = new Vue({
router
}).$mount('#app')
// 뷰 인스턴스에 라우터 추가
</script>
</body>- 네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌트에도 router-view가 있고, 최상의 컴포넌트의 하위 컴포넌트에도 router-view가 있다는 것이다.
- 네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시된다.
4.네임드 뷰
네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 이전에 다룬 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view> <!-- URL 값에 따라 갱신되는 화면 영역 -->
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> <!-- 라우터 CDN 추가 -->
<script>
const Body = { template: '<div>This is Body</div>' };
const Header = { template: '<div>This is Header</div>' };
const Footer = { template: '<div>This is Footer</div>' };
const LoginBody = { template: '<div>This is LoginBody</div>' };
const LoginHeader = { template: '<div>This is LoginHeader</div>' };
const LoginFooter = { template: '<div>This is LoginFooter</div>' };
// 컴포넌트 내용 정의
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header,
footer: Footer
// <router-view>의 name 속성과 컴포넌트를 연결
}
},
{
path: '/login',
components: {
default: LoginBody,
header: LoginHeader,
footer: LoginFooter
}
}
]
});
// 뷰 라우터 정의
const app = new Vue({
router
}).$mount('#app')
// 뷰 인스턴스에 라우터 추가
</script>
</body>
블로그 운영 x