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

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

在一个页面里我们有2个以上<router-view>区域，通过配置路由的js文件，来操作这些区域的内容

在src目录下的App.vue文件的<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

name属性的作用是 渲染对应的路由配置中 components 下的相应组件。

<router-view>标签  CSS样式

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。我们需要在路由里配置这三个 router-view 区域，配置主要是在components字段里进行。确保正确使用 components 配置 (带上 s)：

上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。

我们更新页面

首页三个路由区域为：

Hi三个路由区域为：