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 />的承载下,上面路由的转发写法是为了将三级路由的页面显示到二级路由上。