Nested Routes, Named Routes (중첩, 이름 라우터) || GAMEB

Nested Routes, Named Routes (중첩, 이름 라우터)

이전에 Router는 한 화면에 Component 1개만 표시했습니다.
더 복잡한 앱을 위해서는 화면에 여러개의 Component도 필요합니다.
이때 사용하는것이 Nested Router와 Named Router입니다.

Nested Router

<html>
    <head>
        <title>중첩 Router</title>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
        <script>
            /* User 컴포넌트 정의 */
            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 = [
                pate : '/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>

최상위 Component에 Router가 뿌려질 영역을 만들었습니다.
User라는 Component가 뿌려지는데 User Component는 router-view를 가지고 있습니다.
User Component는 자식 Component로 UserPost와 UserProfile이라는 Component를 가지고 있고,
URL에 따라 자신이 가지고 있는 router-view에 해당 자식 Component를 뿌려줍니다.
user/posts, user/profile 주소로 이동했을때 내용이 나타나는것을 확인할 수 있습니다.

Named Router

Router의 이름을 정한다는 의미에서 Named Router라는 이름을 가진 Router입니다.
일반 Router는 한 화면에 한개의 Component.
Nested Router는 Router 안의 다른 Component.
Named Router는 한 화면에 여러개의 Component.

<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>Named Vue Sample</title>
    </head>
    <body>
        <div id="app">
            <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.15/dist/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.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 router = new VueRouter({
                routes : [
                    {
                        path :'/',
                        components : {
                            default : Body,
                            header : Header,
                            footer : Footer
                        }
                    }
                ]
            });

            var app = new Vue({
                router
            }).$mount('#app');  
        </script>
    </body>
    </script>
</body>
</html>

위 예제처럼 router-view에 name 속성을 추가하여 이름을 부여함으로써 Router의 접근도 이름으로 가능해집니다.