4-命名视图

命名视图

同时 (同级) 展示多个视图，而不是嵌套展示，如果 router-view 没有设置名字，那么默认为 default

  <'router-view class="view one"></router-view'>
  <'router-view class="view two" name="a"></router-view'>
  <'router-view class="view three" name="b"></router-view'>

对于同个路由，多个视图就需要多个组件。使用 components 配置

  const router = new VueRouter({
    routes: [
      {
        path: '/',
        components: {
          default: Foo,
          a: Bar,
          b: Baz
        }
      }
    ]
  })

嵌套命名视图: 使用命名视图创建嵌套视图的复杂布局需要用到的嵌套 router-view 组件

UserSettings 组件的 <template> 部分应该是类似下面的这段代码：

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>


{
  path: '/settings',
  // 也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}