项目进行到后台部分了,在这里整理下后台导航栏菜单路由的跳转详解。
项目环境:项目环境: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