Miracle Morning, LHWN

4. 네스티드 라우터와 네임드 뷰 본문

IT 기술/[Vue] 기본

4. 네스티드 라우터와 네임드 뷰

Lee Hye Won 2021. 6. 2. 14:33
네스티드 라우터와 네임드 뷰의 차이

 

출처 : https://racoonlotty.tistory.com/entry/vuejs-vue-%EB%9D%BC%EC%9A%B0%ED%84%B0

 

# 네스티드 라우터는 왼쪽 그림처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식

# 네임드 뷰는 오른쪽 그림처럼 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

 

네스티드 라우터 (Nested Router)

 

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

출처 : https://nightstudy.tistory.com/73

 

<!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>Vue Nested Router</title>
</head>
<body>
    <div id="app">
        <!-- User 컴포넌트가 뿌려질 영역 -->
        <router-view></router-view>
    </div>

    <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>
    <script>
        // 컴포넌트 내용 정의
        // 하위 컴포넌트가 뿌려질 영역을 한 번 더 추가
        var User = {
            template: `
                <div>
                    User Component
                    <router-view></router-view> 
                </div>
            `
        };
        var UserPost = { template: '<p>User Post Component</p>' };
        var UserProfile = { template: '<p>User Profile Component</p>' };

        // 네스티드 라우팅 정의
        var routes = [
            {
                path: '/user', // 네스티드 라우터를 실행하는 기본 URL
                component: User,
                children: [
                    {
                        path: 'posts',
                        component: UserPost
                    },
                    {
                        path: 'profile',
                        component: UserProfile
                    }
                ]
            }
        ];

        // 뷰 라우터를 routes로 정의
        var router = new VueRouter({
            routes
        });

        // 뷰 인스턴스에 라우터 추가
        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

# 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때에는 유용하지만

한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다.

→ 네임드 뷰로 해결!

 

네임드 뷰 (Named View)

 

# 네임드 뷰 : 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

<!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>Vue Named View Sample</title>
</head>
<body>
    <!-- 라우팅 영역 정의 -->
    <div id="app">
        <router-view name='header'></router-view>
        <!-- name 을 지정하지 않으면 default -->
        <!-- name 은 components 에서 정의하는 컴포넌트와 매칭하기 위한 속성 -->
        <router-view></router-view>
        <router-view name='footer'></router-view>
    </div>
    
    <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>
    <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>' };

        // 이번에는 new VueRouter 로 라우터 생성 후 라우터 정보를 바로 그 안에 정의
        var router = new VueRouter({
            routes: [
                {
                    path: '/', // 네임드 뷰가 실행될 URL 을 정의
                    components: { // 위의 name 속성에 따라 표시될 컴포넌트를 정의
                        default: Body,
                        header: Header,
                        footer: Footer
                    }
                }
            ]
        });

        // 인스턴스를 생성한 후 네임드 뷰 정보를 갖고 있는 라우터를 포함
        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

저작자표시

'IT 기술 > [Vue] 기본' 카테고리의 다른 글

6. 뷰 템플릿 (Template)  (0) 2021.06.02
5. 뷰 HTTP 통신  (0) 2021.06.02
3. 상용 웹 앱을 개발하기 위한 필수 기술들, 라우터 & HTTP 통신  (0) 2021.06.01
2. 뷰 컴포넌트 통신  (0) 2021.06.01
1. 화면을 개발하기 위한 필수단위, 인스턴스와 컴포넌트  (0) 2021.06.01
'IT 기술/[Vue] 기본' Related Articles more
Comments