1. 라우터 개념
<router-link to="/..."></router-link>
<router-view></router-view>
var routes = [ ... ] → 라우팅 정보 객체
var router = new VueRouter( ... ) → 라우터 객체
var app = new Vue( ... ) → 뷰 인스턴스
Vue( ... ).$mount() → $mount() API
2. 여러 컴포넌트로 화면 구성하기
A. 네스티드 라우터
상위 컴포넌트가 하위 컴포넌트를 포함하는 방식
최상위 ---라우터---> User컴포넌트 ---라우터---> Posts/Profile
path, component, children 활용
<!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>
B. 네임드 뷰
같은 레벨에서 여러 개의 컴포넌트를 동시에 표시하는 방식
최상위 ---라우터(header)----> Header
┣----라우터(default)----> Body
┗----라우터(footer)----> Footer
path, components 활용
<!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">
<h1>Named View Example</h1>
<p>
<router-link to="/">Go to "/"</router-link>
<router-link to="/login">Go to "/login"</router-link>
</p>
<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 LoginBody = { template: '<div>Login-Body</div>' };
var LoginHeader = { template: '<div>Login-Header</div>' };
var LoginFooter = { template: '<div>Login-Footer</div>' };
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header,
footer: Footer
}
},
{
path: '/login',
components: {
default: LoginBody,
header: LoginHeader,
footer: LoginFooter
}
}
]
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
'Frontend' 카테고리의 다른 글
| Vue.js (7) 뷰 템플릿 (0) | 2020.04.24 |
|---|---|
| Vue.js (6) HTTP 통신 (0) | 2020.04.23 |
| Vue.js (4) 컴포넌트 간 통신 (0) | 2020.04.11 |
| Vue.js (3) 인스턴스와 컴포넌트 (0) | 2020.04.11 |
| Vue.js (2) 환경구축 (0) | 2020.04.11 |
