vue-router从入门到精通之命名视图（四）

应用场景，当我们想同时展示多个视图，而不是嵌套展示。如：sidebar（侧导航）和main（主内容）两个视图，这个时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default

    <router-view class="center"></router-view>
    <router-view class="center" name="a"></router-view>
    <router-view class="center" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，router配置如下：

{
    path: '/',
    components: {
      default: children1,
      a: children2,
      b: children3
    }
  }

这里需要注意的是：components这个单词是有加s的，代表组。

当然，命名视图也可以在嵌套中使用，在about组件中

    <router-view></router-view>
    <router-view name="a"></router-view>

在router实例化配置中

{
    path: '/about',
    component: about,
    children: [{
      path: '/children1',
      component: children1
    },
    {
      path: '/children2',
      component: children2
    },
    {
      path: '/children3',
      components: {
        default: children3,
        a: children1,
        b: children2
      }
    }
    ]
  }