Day 24 - Vue-Router巢状路由

不过，除了在参数传递路由之外，还有一种情况是在母路由之外，还有子路由需要被切换，这种状况我们称作巢状路由。

若要设定巢状路由，可以透过children属性:

{
  path: '/About',
  component: About,
  children: [
    {
      path: 'Info',
      component: Info
    },
    {
      path: 'Contact',
      component: Contact
    },
  ]
}

不过要小心 children 里面的 path 不要加上 / 开头，否则会被带回根目录。
我们也可以搭配参数进行巢状路由切换:

{ 
    path: "/users/:userId", 
    component: User, 
    children: [ 
       { 
        path: 'posts', 
        component: Post, 
        }, 
   ] 
}

假设我们在网址列 xxx/users/1/ 就可以看到 1 号使用者的资讯， 进入路由之後，你会发现网址此时变成 xxx/users/1/posts

原始码可参考:
https://codesandbox.io/s/route-params-vue-router-4-with-dynamic-router-forked-r2et6?from-embed=&file=/src/router.js