渲染多级菜单栏
1 根据路由固定渲染
template部分
v-for="(nav, index) in navs" //一级菜单栏循环
// !!特别注意，二级循环是从上一级的nav开始循环，不是冲原来的数据开始
v-for="item in nav.children.filter(item => item.meta.isChild === true)" // 二级菜单循环
// js 部分
data () {
return {
navs: routes.filter(route => route.meta.isNavsItem === true) //固定的渲染
}
}
2 后台数据动态渲染菜单栏
template的循环部分和固定渲染一样
// 特别注意的是！二级菜单中，后台跳path要和前端routes保持一致才能跳转到相应的网页。
<el-menu-item v-for="item in nav.children"
@click="handleRoute(item.path)"
:key="item.title"
active-text-color="#dedede"
>
{{item.title}}
</el-menu-item>
js部分
data () {
return {
netNavs: []
}
}
created () {
// console.log(this.navs)菜单栏的动态渲染
this.$http.getSideBar().then(res => {
let barData = res.data
this.netNavs.push(...barData) // 后端获取数据赋值到data里面
})
}
-
routes写法
export default [ { path: '/', redirect: '/index', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: false, hasChild: false } }, { path: '/index', name: 'index', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: false, hasChild: false } }, { path: '/admin/netbar', name: 'netbar', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '网吧管理', hasChild: true }, children: [ // 二级菜单 { path: '/admin/netbar/intercafe', component: InterCafe, name: 'intercafe', meta: { title: '网吧管理', isChild: true } }, { path: '/admin/netbar/room', component: Rooms, name: 'Rooms', meta: { title: '包房管理', isChild: true } }, { path: '/admin/netbar/roomset', component: RoomsSet, name: 'roomsset', meta: { title: '包间设置', isChild: true } }, { path: '/admin/netbar/roomorders', component: RoomsOrders, name: 'roomorders', meta: { title: '包间订单', isChild: true } } ] }, { path: '/admin/outfood', name: 'outFood', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '外卖管理', hasChild: true }, children: [ { path: '/admin/outfood/classify', component: Classify, name: 'classify', meta: { title: '分类管理', isChild: true } }, { path: '/admin/outfood/products', component: Products, name: 'products', meta: { title: '商品管理', isChild: true } }, { path: '/admin/outfood/orders', component: Orders, name: 'orders', meta: { title: '订单管理', isChild: true } }, { path: '/admin/outfood/set', component: Set, name: 'set', meta: { title: '设置管理', isChild: true } } ] }, { path: '/admin/user', name: 'users', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '用户管理', hasChild: true }, children: [ { path: '/admin/user/userlist', component: Users, name: 'userlist', meta: { title: '用户列表', isChild: true } }, { path: '/admin/user/pointlist', component: PointsList, name: 'points', meta: { title: '积分列表', isChild: true } }, { path: '/admin/user/grade', component: GradeSet, name: 'grade', meta: { title: '等级设置', isChild: true } }, { path: '/admin/user/viphandle', component: VipHandle, name: 'viphandle', meta: { title: 'VIP管理', isChild: true } }, { path: '/admin/user/viphandle/failvip', // 过期vip component: FailVip, name: 'failVip', meta: { title: '过期VIP', isChild: false } } ] }, { path: '/admin/account', name: 'account', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '账号管理', hasChild: true }, children: [ { path: '/admin/account/accountlist', component: Account, name: 'accountlist', meta: { title: '账号管理', isChild: true } } ] }, { path: '/admin/financial', name: 'financial', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '财务管理', hasChild: true }, children: [ { path: '/admin/financial/charge', component: ChargeRecord, name: 'charge', meta: { title: '充值统计', isChild: true } }, { path: '/admin/financial/pay', component: PayRecored, name: 'pay', meta: { title: '消费统计', isChild: true } } ] }, { path: '/admin/notice', name: 'notice', components: { default: Index, leftnavs: icSidebar }, meta: { isNavsItem: true, title: '公告管理', hasChild: true }, children: [ { path: '/admin/noticelist', component: Notice, name: 'noticelist', meta: { title: '公告管理', isChild: true } }, { path: '/admin/noticelist/add', // 添加公告 component: NoticeAdd, name: 'noticeadd', meta: { title: '添加公告', isChild: false } }, { path: '/admin/noticelist/edit/:editId', // 修改公告 component: NoticeEdit, name: 'noticeedit', meta: { title: '修改公告', isChild: false } } ] } ]
