嵌套路由
一些应用程序的 UI 由多层嵌套的组件组成。
在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：
/user/johnny/profile /user/johnny/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。
接着上节创建的 app ：
<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>User </div>',
}
// 这些都会传递给 `createRouter`
const routes = [{ path: '/user/:id', component: User }]
这里的 <router-view> 是一个顶层的 router-view。它渲染顶层路由匹配的组件。
同样地，一个被渲染的组件也可以包含自己嵌套的 <router-view>。
例如，如果我们在 User 组件的模板内添加一个 <router-view>：
const User = {
template: `
<div class="user">
<h2>User </h2>
<router-view></router-view>
</div>
`,
}
要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children：
const 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,
},
],
},
]
注意，以 / 开头的嵌套路径将被视为根路径。
这允许你利用组件嵌套，而不必使用嵌套的 URL。
如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。
此时，按照上面的配置，当你访问 /user/eduardo 时，在 User 的 router-view 里面什么都不会呈现，因为没有匹配到嵌套路由。
也许你确实想在那里渲染一些东西。
在这种情况下，你可以提供一个空的嵌套路径：
const routes = [
{
path: '/user/:id',
component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
// 当 /user/:id 匹配成功
// UserHome 将被渲染到 User 的 <router-view> 内部
{ path: '', component: UserHome },
// ...其他子路由
],
},
]
参考资料
https://next.router.vuejs.org/zh/guide/essentials/nested-routes.html
