홍준혁

Vue.js-네스티드 라우터 본문

Vue.js

Vue.js-네스티드 라우터

홍준혁 [Hong-JunHyeok] 2020. 9. 21. 22:06
728x90

 

네스티드 라우터는 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

 

네스티드의 뜻을 보면 

 

뭔가 중첩... 음 뜻에서 유추할 수 있듯 네스티드 라우터는 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 되어있다.

 

네스티드 라우터

그림을 보면 대충 어느 식인지 이해가 될 텐데,

네스티드 라우터는 화면을 구성하는 컴포넌트의 양이 적을 때는 유용하지만, 

한 번에 더 많은 양의 컴포넌트를 표현하는 데에는 무리가 있다.

 

무튼 코드로 한번 구현을 해보자.

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
    </head>
    <body>
        <div id="app">
            <h1>Vue배우는중</h1>
            <router-view></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.3/vue-router.min.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>" };
            //User라는 컴포넌트를 정리

            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>

 

실행해보면 아무것도 보이지 않을 것이다.

하지만 주소 마지막에 user을 치면 User Component라는 것이 보일 것이다. 거기에 posts를 붙여서 엔터를 눌러보면

User Component밑에 User Profile Component가 보이는 것을 알 수 있다.

 

실제 내용을 보면 

이런 식으로 보이는 것을 알 수 있다.

 

이때 기본적인 원리는 전에 설명한 라우터와 크게 다를 것이 없다.

하지만 라우터 안에 또 다른 라우터가 있다는 개념이 추가된 것인데,

 

routes에 children속성을 보면 routes형식의 코드가 작성되어 있는 것을 알 수 있다.

이런 식으로 코드가 동작한다.

 

이제 네스티드 라우터 구성 방법을 알아봤는데 

아까 한 번에 많은 라우터가 있으면 표시하는데 한계가 있다고 했는데 그 단점을 해결해줄 

 

네임드 뷰를 한번 배워볼 것이다.

 

다음 시간에 뿅

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-HTTP 통신  (0) 2020.09.22
Vue.js-네임드 뷰  (0) 2020.09.22
Vue.js-Router(뷰 라우터)  (0) 2020.09.21
Vue.js-하위에서 상위 컴포넌트로 데이터 전달  (0) 2020.09.21
Vue.js 상위-하위 컴포넌트 데이터 전달  (0) 2020.09.21
'Vue.js' Related Articles more
Comments