同个路由，多个视图

1.最近对于刚接触的vue学习中遇到这样的问题：
2.需求：我想在一个后缀为.vue的文件中，导入其他后缀为.vue的文件，即能过实现在同一个路由下，能够显示多个视图
3.解决方案：
有3个待加载的vue文件：HelloWorld.vue ,topBar.vue, footBar.vue
一个主vue文件app.vue
要将三个待加载的都通过app.vue在同一个路径显示在同一个页面上
首先处理index.js这个文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import topBar from '@/components/topBar'
import footBar from '@/components/footBar'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: HelloWorld,
        topBar: topBar,
        footBar: footBar
      }

  }
  ]

})

这里对app.vue的处理：

<template>
  <div id="app">
    <div>
      <router-view name="topBar"></router-view>
      <router-view></router-view>
       //此处没写name,表示name="default"
      <router-view name="footBar"></router-view></div>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

最终得到了想要的结果：