vue-router单页面多路由区域操作

在一个页面中有两个以上的<router-view>区域。

在App.vue文件

<router-view></router-view>
<router-view name="left" style="float: left;width: 50%;background: #ccc;height: 300px"></router-view>
<router-view name="right" style="float: right;width: 50%;background: #c0c;height: 300px"></router-view>

在路由文件中重新配置一下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:{
        default:HelloWorld,
          left:Hi1,
          right:Hi2
      }
    },
    {
      path:'/Hi',
        name: 'Hi',
        components:{
         default:Hi,
            left:Hi1,
            right:Hi2
        },

    }
  ]
})

效果如上图。未能深刻理解