vue组装模板（侧边栏+顶部+主体）--项目阶段4

目录

一、前言介绍

二、结构解析

三、页面拆分

（一）页面拆分 

1.侧边栏页面（固定）--Aside.vue

2.顶部页面（固定）--Header.vue        

3.主体页面（不固定的）--示例用UserView.vue

（二）页面组装-Manage.vue

 四、运行

代码获取

---

一、前言介绍

在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来：

初学者SpringBoot+Vue打通前后端详细步骤（从零开始）--项目阶段3_云边的快乐猫的博客-CSDN博客

本篇文章是给这个项目增加上侧边栏和顶部，点击不同的侧边栏菜单会有不同的页面效果。

二、结构解析

前端使用的技术还是Vue+Element-ui，还用到elementui里面的布局容器。

页面要分成3部分组成，分别是侧边栏、顶部和主体3部分。然后再把这3部分页面组装合并在一个Manage.vue页面里面。

其中侧边栏和主体部分可以固定，点击侧边栏中的菜单时候，主体部分就通过路由切换到对应的页面。 

这种结构的优点与缺点：

使用侧边栏的系统实际上是单页面系统，运行用户体验会更好，但是缺点就是SEO（搜索曝光率）没有多页面的好，典型的网易云就是单页面的系统。就是整体框架不会变，只是变里面的内容。这样用户体验度会比较好。

若依开源项目（运行超链接）也是一样的

三、页面拆分与组装

（一）页面拆分 

没有拆分之前的集成代码：

https://download.csdn.net/download/m0_52861000/88244356?spm=1001.2014.3001.5501 

1.侧边栏页面（固定）--Aside.vue

因为侧边栏页面是固定位置的而且是通用的（就是点击菜单栏，这个都存在的，除了登录页面不存在），所以这个页面写在vue的通用页面components包目录下。命名为Aside.vue

2.顶部页面（固定）--Header.vue        

 因为顶部页面是固定位置的而且是通用的（就是点击菜单栏，这个都存在的，除了登录页面不存在），所以这个页面写在vue的通用页面components包目录下。命名为Header.vue

3.主体页面（不固定的）--示例用UserView.vue

主体页面界面就是自由嵌套一个完整页面进去的。我这里做示范，把上一个做的页面放进来

（二）页面组装-Manage.vue

1.接下来就要把这些侧边栏、顶部、主体页面组装放到一个新页面里面。这里也是放到通用文件components里面，命名为Manage.vue

2.最后一个步骤，让这些页面可以加载起来，那就是放到路由里面。

 四、运行

cd切到到当前文件夹demo，然后输入运行命令

npm run serve

默认8080端口然后主体部分会重定向到user界面 

代码获取

1.点击下方那个猫扫一下

2.去那边回：项目阶段4

有什么问题都可以评论区留言，看见都会回复的

如果你觉得本篇文章对你有所帮助的，把“文章有帮助的”打在评论区

多多支持吧！！！

点赞收藏评论，当然也可以点击文章底部的红包或者订阅付费文章创作支持一下了。抱拳了！

vip文章：http://t.csdn.cn/Uq5j1

bug大全订阅文章：http://t.csdn.cn/j6UyR