vue-antd-admin框架(二) 布局与页面渲染
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-antd-admin框架(二) 布局与页面渲染相关的知识，希望对你有一定的参考价值。
参考技术A 上文中提到在App.vue文件中使用了router-view来展示路由对应的视图，针对router-view，官方解释如下，有兴趣的童鞋移步 链接在此之前，我们要了解该框架下几个重要的布局组件：
我们以默认的路由/#/dashboard/workplace 为例，看下页面如何展示对应组件。
框架中如果没有设置使用异步路由，默认路由在router/config.js中，dashboard配置的路由如下
如上，访问根路径会被重定向到#/login，登录成功后会重定向到/#/dashboard/workplace。
路由匹配三级：1）根路径 2）/dashboard路径 3）/dashboard/workplace
路由匹配到根路径，并加载TabsView组件到App.vue中指定的router-view中，我们来看下TabsView组件。
它位于@layouts/TabsView.vue中，主要有AdminLayout包裹contextmenu(右键菜单)、tabsHead（多tab标签栏）以及下级路由渲染的router-view组成。
整个页面的展示如下
dashboard匹配加载BlankView，BlankView是一个空白页面，主要包含切换动画和router-view
还有另外一种PageView，包含了 PageLayout 布局和路由视图内容区
展示如下
异步加载@/pages/dashboard/workplace下的组件，并渲染到BlankView组件中
在workplace组件中，主要使用antd组件库中的 Grid布局
以上为vue-antd-admin框架的布局和渲染流程，接下来剖析左侧菜单以及路由解析规则的生成
以上是关于vue-antd-admin框架(二) 布局与页面渲染的主要内容，如果未能解决你的问题，请参考以下文章