NestedVue

<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-view></router-view>
</div>

<script>
    let parent = {
        template: `
            <div>
                상위 컴포넌트
                <router-view></router-view>
            </div>`
    }

    let c1 = {
        template: `<div>하위 컴포넌트1</div>`
    }

    let c2 = {
        template: `<div>하위 컴포넌트2</div>`
    }

    // router 기능
    let routes = [
        {
            path: '/parent',
            component: parent,
            children: [
                {path: 'child1', component: c1},
                {path: 'child2', component: c2}
            ]
        },
    ]

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

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