vue multi-view

1、命名视图的显示
	<router-view name='组件名'></router-view>
	<router-view name='组件名'></router-view>
	<router-view ></router-view>
	
2、因为是在一个页面显示,路径唯一,所以组件都是一个路由中的组件
	    {
		      path: '/',
		      name: 'HelloWorld',
		      components:{
		        组件名:A,
		        组件名:B,
		        default:C
		     }
		 }
		 当来到'/'页面时,视图会显示对应组件内容,未命名的视图用default:组件,来匹配

Code Sample:
App.vue file:

<template>
  <div id="app">
    <!-- 导航 -->
    <router-view name='nav'></router-view>
    <!-- 侧边栏 -->
    <router-view name='aside'></router-view>
    <!-- 主要内容 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data()
  {
    return{

    }
  }
}
</script>

<style scoped >

*{
  margin:0;
  padding: 0;
}


</style>

Total routing file:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:{
        nav:A,
        aside:B,
        default:C
      }
    }
  ]
})