element ui导航和路由

element-ui

第一步：结构布局

container知识

效果

第二步：配置路由

1. 在el-menu-item，以index为直接路由
   第一步：在el-menu中，开启:router="true"
   第二步：在el-menu-item标签，直接给index路由地址
   

2. 在el-menu-item，以route为直接路由,将覆盖index
   第一步：在el-menu中，开启:router="true"
   第二步：在el-menu-item标签，路由地址赋值给:route="{path:'/nav01/item03'}"
   

3. 动态路由，以自定义事件作为路由，用this.$router.push 第一步：必须关闭:router="false" 第二步：在el-menu-item标签，自定义事件 第三步：在JS中定义处理函数，this.$router.push(url)调整路由
   
   

4. js动态渲染导航
   

      menuArr: [{
          'icons': '/static/img/1.png',
          'title': '订单管理',
          'hasChild': false,
          'index': '1',
          'subItem': [{
            'index': '1-1',
            'title': '订单管理',
            'component': 'myorder',
            'hasChild': true
          }]
        },
        {
          'icons': '/static/img/2.png',
          'title': '财务管理',
          'hasChild': false,
          'index': '2',
          'subItem': [{
            'index': '2-1',
            'title': '我的资产',
            'component': '/managerCenter/MyOrder2',
            'hasChild': true,
          }, {
            'index': '2-2',
            'title': '收支明细',
            'component': '/managerCenter/MyOrder3',
            'hasChild': true,
          }, {
            'index': '2-3',
            'title': '我的发票',
            'component': '/managerCenter/MyOrder1',
            'hasChild': true,
          }]
        },
        {
          'icons': '/static/img/3.png',
          'title': '产品管理',
          'hasChild': false,
          'index': '3',
          'subItem': [{
            'index': '3-1',
            'title': '产品管理',
            'component': 'management',
            'hasChild': true,
          }, {
            'index': '3-2',
            'title': '发布产品',
            'component': 'bidding',
            'hasChild': true,
          }]
        },
        {
          'icons': '/static/img/4.png',
          'title': '企业中心',
          'hasChild': false,
          'index': '4',
          'subItem': [{
            'index': '4-1',
            'title': '我的企业',
            'component': 'myfirm',
            'hasChild': true,
          }, {
            'index': '4-2',
            'title': '个人信息',
            'component': 'myinform',
            'hasChild': true,
          }, {
            'index': '4-3',
            'title': '员工管理',
            'component': 'mystaff',
            'hasChild': true,
          }]
        }
      ]