elemenetui 布局_5. vue element-ui 后台布局

项目进行到后台部分了，在这里整理下后台导航栏菜单路由的跳转详解。

项目环境：项目环境：vue + vue-cli + element-ui

附最终效果图：

image.png

1、整体布局

image.png

2、侧边导航栏

1、代码编写

:default-active="this.$route.path" // 这里是指当前路由，这样在路由变化的时候，对应的el-menu才会高亮。

:router="true" // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

background-color="rgba(52, 64, 88)"

text-color="white"> //导航栏字体颜色

项目

//index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记

进行中

已完成

创建项目

搜索

2、路由编写

在 router/index.js 文件中编写路由，这里有父子路由之分，跳转到后台的 home 就是父路由，点击导航菜单渲染出来的页面文件是子路由。

import ho