11.Vue 路由多视图

在Vue路由中可以使用多视图模式：

1.在 App.vue中添加多视图：

<template>
  <div id="app">
      <router-view  name="header"/>
      <!-- 如果不指定name则表示default， -->
      <router-view />
      <router-view  name="footer"/>
  </div>
</template>

2.在router/index.js中配置多视图规则

  //导入路由页面
  import RouterIndex from '../page/router/routerIndex'
  import RouterA from '../page/router/routerA'
  import RouterB form '../page/router/routerB'
  ....
    // 导入路由、使用路由省略....
  ....
  export default new Router({
     routers: [
        {
          path: '/views',
          components: {
              header: RouterIndex ,
              default: RouterA ,
              footer: RouterB 
          }
        },
     ]
  });

  routers中配置多路由视图使用components，注意这里多了个s，如果是component则表示一个