Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签，此标签的作用就是显示当前路由级别下一级的页面。

例如：

#路由引入 desk.vue 此页面为基础页面，所有页面引入，负责系统的整体布局。

#desk页面分割完成后，将<router-view/>标签写入到实际渲染区域。

#视系统布局而定，左右布局在右侧，上中下布局在中间。

sys-router.js

 desk.vue 页面渲染部分

 

上面路由的 path="/index" 路径页面，直接被desk.vue 的 <router-view /> 所显示。

        需要注意的是这个 <router-view /> 标签只能显示根目录下的下一级标签，如果子路由里又存在 children 路由块需要继续增加<router-view />标签，写法如下：

next-router.js

    由路由关系图可以看出来这个此路由需要两个 <router-view /> 承载 ，上面的写法是二级路由为 <router-view /> ，来显示三级路由，三级路由的页面铺满了二级路由的页面。

由页面源码可见

1、二级 <router-view class="sssssssssssssssssssssssss"/>

2、三级<router-view class="fffffffffffffffffffffff"/>
由此可得三级路由的显示必须在<router-view />的承载下，上面路由的转发写法是为了将三级路由的页面显示到二级路由上。