嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts+------------------+ +-----------------+| User | | User || +--------------+ | | +-------------+ || | Profile | | +------------> | | Posts | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
接着上节创建的 app：
const User = { template: ' User { { $route.params.id }} ' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：
const User = { template: ` User { { $route.params.id }}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 中 path: 'posts', component: UserPosts } ] } ] }) 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功， // UserHome 会被渲染在 User 的 中 { path: '', component: UserHome }, // ...其他子路由 ] } ] }) 命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) 以上案例相关的可运行代码请。
嵌套命名视图
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例：
/settings/emails /settings/profile+-----------------------------------+ +------------------------------+| UserSettings | | UserSettings || +-----+-------------------------+ | | +-----+--------------------+ || | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | || | +-------------------------+ | | | +--------------------+ || | | | | | | | UserProfilePreview | || +-----+-------------------------+ | | +-----+--------------------+ |+-----------------------------------+ +------------------------------+
Nav只是一个常规组件。UserSettings是一个视图组件。UserEmailsSubscriptions、UserProfile、UserProfilePreview是嵌套的视图组件。
注意：我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上
UserSettings 组件的 <template> 部分应该是类似下面的这段代码：
User Settings
嵌套的视图组件在此已经被忽略了，但是你可以在找到完整的源代码
然后你可以用这个路由配置完成该布局：
{ path: '/settings', // 你也可以在顶级路由就配置命名视图 component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] } 一个可以工作的示例的 demo 在。
https://jsfiddle.net/22wgksa3/8174/ //**********************************html************************
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app">
<h1>Nested Named Views</h1> <router-view></router-view></div>//*****************************js*********************
const Foo = { template: '<h2>pagecontent</h2>' }
const Bar = { template: '<h2>sidebar</h2>' }const Baz = { template: '<h2>navbar</h2>' }const router = new VueRouter({
mode: 'history', routes: [ { path: '/', // You could also have named views at tho top component: UserSettings, children: [ { path: '', components: { default: Baz, a: Bar, b: Foo } } ] } ]})new Vue({
router, el: '#app'})//****************************************效果如下*********************