728x90
이제 네임드 뷰를 만들어 보겠습니다.
아래는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Named</title>
</head>
<body>
<div id="app">
app area
<router-view name="header"></router-view>
<router-view name="body"></router-view>
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script>
var Header_component = {
template: '<div>Header</div>'
};
var Body_component = {
template: '<div>Body</div>'
};
var Footer_component = {
template: '<div>Footer</div>'
};
var router = new VueRouter({
routes: [
{
path: '/',
components: {
header: Header_component,
body: Body_component,
footer: Footer_component
}
}
]
});
new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
필요한 부분만 보겠습니다.
<div id="app">
app area
<router-view name="header"></router-view>
<router-view name="body"></router-view>
<router-view name="footer"></router-view>
</div>
<script>
var Header_component = {
template: '<div>Header</div>'
};
var Body_component = {
template: '<div>Body</div>'
};
var Footer_component = {
template: '<div>Footer</div>'
};
var router = new VueRouter({
routes: [
{
path: '/',
components: {
header: Header_component,
body: Body_component,
footer: Footer_component
}
}
]
});
new Vue({
router
}).$mount('#app');
</script>필요한 부분이 많은데요.
천천히 알아가 봅시다.
app에 이름(name)을 지정한 router-view를 둡니다.
header, body, footer 통 3개를 만들고 script의 Vue코드를 보겠습니다.
component는 template밖에 없으므로 생략하고
VueRouter쪽에 기존과 다르게 path 지정 후에 component에 (router-view name) : (component name)으로 매칭시켜줍니다.
그리고 실행 시키면 아래와 같이 나옵니다.
이를 통해 router-viewdml 이름을 지정하고 그 영역에 특정 component를 구성한 것을 알 수 있습니다.
이렇게 구성해두고 내부에 Nested형식으로 만들 수 있고 그 반대도 가능합니다.
다음엔 Http통신에 대해 공부하겠습니다.
'Vue.Js' 카테고리의 다른 글
| [Vue.Js] 13. Vue.Js template (1 데이터 바인딩) (0) | 2023.04.29 |
|---|---|
| [Vue.Js] 12. Vue.Js Http 통신(axios) (0) | 2023.04.28 |
| [Vue.Js] 10. Vue.Js 네스티드 라우터 & 네임드 뷰 (1) (0) | 2023.04.26 |
| [Vue.Js] 9. Vue.Js 화면 구성 요소 변경 (Router) (0) | 2023.04.25 |
| [Vue.Js] 8. Vue.Js 컴포넌트간의 통신3 (0) | 2023.04.24 |
