Web_Vue/step24_nestedVue.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Document</title>
</head>

<body>
    <h3>Nested Vue 개발 방식 학습</h3>
    <br>
    <hr><br>
    상위 컴포넌트에 하위 컴포넌트 포함하는 방식 <br>
    <br>
    <hr><br>
    <!-- 하면에 보여져야 하는 내용 : 링크(<router-link to="url값">) / 로직처리 view화면(<router-view>)
        상위하위 관계 따라서 상위 template내에 <router-view> 구현
    -->
    <div id="app">
        <router-link to="/parent">상위 컴포넌트</router-link>
        <router-link to="/parent/child1">하위1 컴포넌트</router-link>
        <router-link to="/parent/child2">하위2 컴포넌트</router-link>
        <router-link to="/parent/child2/child3">하위3 컴포넌트</router-link>
        <router-view></router-view>
    </div>

    <script>
        let parent = {
            template: `
                <div>
                    상위 컴포넌트
                    <router-view></router-view>    <!-- skip시에 상위에 포함된 하위가 렌더링되지 않음 --!>
                </div>`
        }

        let c1 = {
            template: '<div>하위1 컴포넌트</div>'
        }
        let c2 = {
            template: `<div>하위2 컴포넌트
                <router-view></router-view>
                        </div>`
        }

        let c3 = {
            template: '<div>하위3 컴포넌트</div>'
        }
        //rotuer기능
        let routes = [
            {
                path: '/parent',
                component: parent,
                children: [
                    { path: 'child1', component: c1 },
                    {
                        path: 'child2', component: c2,
                        children: [{ path: 'child3', component: c3 }]
                    }
                ]
            }

        ]

        //VueRouter 객체 생성
        let router = new VueRouter({
            routes
        });

        let app = new Vue({
            el: "#app",
            router
        });
    </script>
</body>

</html>