-
[Vue.js] 네스티 라우터란?JS 2019. 1. 20. 23:57
네스티 라우터, 네임드 뷰는 여러개의 컴포넌트를 동시에 표시 할 수 있는 라우터이다.
네스티 라우터란?
라우터로 페이지이동을 할때 최소 2개이상의 컴포넌트를 화면에 나타내는 기능
-구조는 상위컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조
예를 들어
localhost:8080/user //user가 상위
localhost:8080/user/detail //detail은 하위
localhost:8080/user/create //create도 하위
이런식으로 접근이 가능함.
-기본 라우터와 네스티라우터의 차이점은 최상위 컴포넌트에도 <router-view>가 있고, 최상위 컴포넌트의 하위 컴포넌트에도
<router-view>가 있다는 것.
예제
30행, 34행의 path=url에 따라 해당 컴포넌트를 보여지게 된다.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!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"><!-- User컴포넌트가 뿌려질 영영역 --><router-view></router-view></div><script>var User ={template :'<div> User Component <router-view></router-view> </div>'};var UserPorfile = {template:'<p>User Profile Component</p>'};var UserPost = {template:'<p>User Post Component</p>'};// 네스티 라우터 정의var routes = [{path: '/user', //ex url : ~~~/usercomponent: User,children:[{path: 'posts', //ex url : ~~~/user/postscomponent: UserPost},{path: 'profile', //ex url : ~~~/user/profilecomponent : UserPorfile}]}];//라우터 생성var router = new VueRouter({routes});var app = new Vue({router}).$mount('#app1');</script></body></html>cs 결과화면
url에
/user
/user/posts
/user/profile
을 쳐보면 해당 컴포넌트가 보여지게 된다.
'JS' 카테고리의 다른 글
[JavaScript] CORS란? (0) 2019.03.12 크로스도메인이란? (0) 2019.03.12 [JavaScript] JSON 다루기 정리 (0) 2018.11.19 [Ajax] ajax 기본 폼 // 비공개 (0) 2018.11.17 [JQuery] .serialize()에 파라미터 추가하기 (0) 2018.11.06
