6-4.Vue-router之多路由区域操作

Vue-router

单页面多路由区域操作

当一个页面存在两个或多个<router-view>区域，可以通过配置index.js文件来操作这些区域。
1.在src/App.vue文件中增加两个路由区域，加入一些css样式可以更加值观地查看执行效果。

<router-view style="width: 100%;height: 200px;background-color: aquamarine;"></router-view>
<router-view name="left" style="float:left;background-color:darkred;width:50%;height:200px;color: white;"></router-view>
<router-view name="right" style="float:right;background-color:greenyellow;width:50%;height:200px"></router-view>

2.在src/components目录下新建两个模板，分别命名为first.vue文件和second.vue文件，在index.js文件的上边引入新建的两个文件。

import HelloWorld from '@/components/HelloWorld'
import First from '@/components/first'