라우팅(Routing)이란?
라우터를 이해하기 위해서는 라우팅(Routing)을 먼저 알아야 한다.
라우팅이란 웹 페이지 간의 이동방법을 의미한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하고 있다.
뷰뿐만 아니라 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있으며 프런트앤드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.
뷰 라우터
뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.
뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router Sample</title>
</head>
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<router-link to="/main">Main 컴포넌트로 이동</router-link>
<router-link to="/login">Login 컴포넌트로 이동</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vuw@2.5.2/dist/vue.js"></script>
<scirpt src="https://unpkg.com.vue-router@3.0.1/dist/vue-router.js"></script>
<script>
var Main = { template: "<div>main</div> };
var Login = { template: "<div>login</div> };
var routes = [
{ path: '/main', component: Main },
{ path: 'login', component: Login}
];
var router = new VueRouter({
routes
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>※$mount()는 el속성과 같이 인스턴스를 화면에 붙여주는 역할을 한다.
인스턴스를 생성할 때 el 속성을 넣지 않았더라도 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있습니다.
Nested Router(네스티스 라우터)
라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Nested Router</title>
</head>
<body>
<div id="app">
<router-view></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>
<script>
var User = {
template: `
<div>
User Component
<router-view></router-view>
</div>
`
};
var UserProfile = { template: '<p>User Profile Component</p>' }
var UserPost = { template: '<p>User Post Component</p>' }
var routes = [
{
path: '/user',
Component: User,
children: [
{
path: 'posts',
component: UserPost
},
{
path: 'profile',
component: UserProfile
},
]
}
];
var router = new VueRouter({
routes
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>예제를 실행해보라. URL 값의 끝 값에 따라 컴포넌트들이 나타날 것이다.
Named View(네임드 뷰)
특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식.
같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시하는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Named View Sample</title>
</head>
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<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>
<script>
var Body = { template: `<div>This is Body</div>`};
var Header = { template: `<div>This is Header</div>`};
var Footer = { template: `<div>This is Footer</div>`};
var router = new VueRouter({
routes: [
{
path: '/',
component: {
default: Body,
header: Header,
footer: Footer
}
}
]
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
'JavaScript > Vue.js' 카테고리의 다른 글
| Vue Template(뷰 템플릿) - 1 (0) | 2021.01.12 |
|---|---|
| Vue HTTP 통신 (0) | 2021.01.09 |
| Vue Component teleport(뷰 컴포넌트 통신) - 2 (0) | 2021.01.07 |
| Vue Component teleport(뷰 컴포넌트 통신) - 1 (0) | 2021.01.07 |
| Vue Component(뷰 컴포넌트) (0) | 2021.01.06 |
댓글