Nested Routes (중첩된 라우트)

//app.vue

<template>
  <div>
    <router-view />
  </div>
</template>

// router-view는 최상위 outlet

//index.js

const User = {
  template: `<div>
      <h2> User {{ $route.param.id }} </h2>
      <router-view></router-view>
    </div>`
};
// router-view는 중첩 outlet으로 Children 옵션에 해당하는 것이 렌더링 된다.

const router = new VueRouter({
  routes: [
    {
      path: "/user/:id",
      component: User,
      children: [
        // 하위경로지정 user/:id/profile ..
        { path: "profile", component: UserProfile },
        { path: "posts", component: UserPosts }
      ]
    }
  ]
});