Vue-Router嵌套路由

1:查看router-view所對應的位置,是屬於頂級出口還是存在於某個組件當中

2:當router-view存在於某個組件當中時

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

　　那么我們在路由文件中,定義對應user的路由當中,需要添加子路由形式

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        },
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
      ]
    }
  ]
})

** 以'/'開頭的嵌套路徑會被當作根路徑,合理的模式是給每個級別的路由都添加空的子路由