![61761c74e569c35e70fcdadd9835c404.png](https://i-blog.csdnimg.cn/blog_migrate/58f41faf326e1b029d528f48dfd96b9e.jpeg)
主页面布局
使用ElementUI布局el-container,简单搭了home页框架
<
显示如图,然后根据自己需要设置导航栏
![f07178498a5e20d9219557ca9e575350.png](https://i-blog.csdnimg.cn/blog_migrate/8a865d66ba872a75d7c98b89828f4ff0.jpeg)
自己修改后页面
![d3adab3fe371b144fb57bc7b902643ae.png](https://i-blog.csdnimg.cn/blog_migrate/380aaa7d89e9abb0ee7912945cadcf30.jpeg)
页面优化
el-menu中属性介绍
background-color:整个menu背景色,如果只要局部有颜色,可以根据class名自己控制调整
active-text-color:当前激活的文字颜色
text-color:文字颜色
:default-openeds默认展开index
:default-active="$route.path"当前激活页面根据路由地址,可以解决刷新后菜单栏当前index展开激活,并且需要在el-menu中加入router
el-menu-item中 index配置为路由path
<
当前选择状态效果如图
![1c9ccb45bc0c45beee4ff516243e0545.png](https://i-blog.csdnimg.cn/blog_migrate/dc16bc35596cd0550b7c1277bae2af56.jpeg)