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

渲染多级菜单栏

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里面
    })
  }

3. 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
           }
         }
       ]
     }
   ]