-
[Vue.js] 네임드뷰Vue 2019. 1. 21. 22:40
네임드뷰란?
특정 페이지로 이동 했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식
- 네스티드 라우터와의 차이점은 화면을 구성하는 컴포넌트수가 적을땐 유리하지만, 네임드뷰는 컴포넌트수가 많을때 유리하다.
예제
14행 : name이 없는 경우 default로 맵핑된다.1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="en" dir="ltr"><head><!--vue --><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><title>네임드 뷰</title></head><body><div id="app1"><router-view name="header"></router-view><router-view></router-view><router-view name="footer"></router-view></div><script>var Header = {template: '<div>여기는 머리</div>'};var Body = {template: '<div>여기는 바디</div>'};var Footer = {template: '<div>여기는 발</div>'};var router = new VueRouter({routes: [{path:'/',components:{default: Body,header: Header,footer: Footer}}]});var app = new Vue({router}).$mount('#app1');</script></body></html>cs 'Vue' 카테고리의 다른 글
[Vus.js] Vue 템플릿과 데이터 바인딩하는 법 (0) 2019.01.27 [Vue.js] Vue Http 통신, 엑시오스(axios)란? (0) 2019.01.21 [Vue.js] Vue 라우터란? (2) 2019.01.20 [Vue.js] Vue 컴포넌트 데이터 주고 받기 (0) 2019.01.14 [Vue.js] Vue 인스턴스의 라이프 사이클 (0) 2019.01.13