Vue中router-view的复用

1. router-view的复用：一个路由页面显示多个路由组件

比如：home路由页面，同时显示Home路由组件和Academic路由组件

router.js中配置： 

    {
      path: '/home',
      name: 'home',
      components: {
        default: Home,//首页默认显示Home路由组件
        'academic': Academic, // 首页还可以显示别的路由组件，比如Academic路由组件
      }
    },

home页面中本来要显示Home路由组件的，此时如下配置，也会显示Academic路由组件：

<template>
  <div id="app">
    
    <div class="header">
      <div class="center">
        <div class="logo">
          <img src="./assets/logo.png" alt="">
        </div>
        <ul class="nav">
          <router-link to="/home" tag="li">Home</router-link>
          <router-link to="/about" tag="li">About</router-link>
          <router-link to="/learn" tag="li">Learn</router-link>
          <router-link to="/study" tag="li">Study</router-link>
          <router-link :to="{name: 'community'}" tag="li">Community</router-link>
      </ul>
      </div>
    </div>

    <router-view class="router-view"/>
    <router-view class="router-view" name="academic"/>
    <div class="footer"></div>
  </div>
</template>