渲染多級菜單欄
1 根據路由固定渲染
template部分
v-for="(nav, index) in navs" //一級菜單欄循環(huán)
// !!特別注意挥吵，二級循環(huán)是從上一級的nav開始循環(huán)裤唠，不是沖原來的數據開始
v-for="item in nav.children.filter(item => item.meta.isChild === true)" // 二級菜單循環(huán)
// js 部分
data () {
return {
navs: routes.filter(route => route.meta.isNavsItem === true) //固定的渲染
}
}
2 后臺數據動態(tài)渲染菜單欄
template的循環(huán)部分和固定渲染一樣
// 特別注意的是！二級菜單中泥张，后臺跳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)菜單欄的動態(tài)渲染
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: '充值統(tǒng)計', isChild: true } }, { path: '/admin/financial/pay', component: PayRecored, name: 'pay', meta: { title: '消費統(tǒng)計', 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 } } ] } ]
