动态菜单栏渲染,和路由的配置

渲染多级菜单栏

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里面
    })
  }
  1. 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
            }
          }
        ]
      }
    ]
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容