element中NavMenu配置vue-route

首先element-ui中的NavMenu中是封装了route的，所以没有必要像下面这样子写

 
    
    首页
 

下面是我写导航栏的操作

首先看一下template中的代码

              

                
                
                  
                  
                    {{subitem.name}}
							
    
                
                
                
                  
                  {{item.name}}
                
              
            

js中的代码

export default {
    data(){
        return{
          mymenu:[
            {
              "name": "BMT",
              "children": [{
                "name": "管理",
                "uri": "/controller/bmtManage"
              }, {
                "name": "注册",
                "uri": "/controller/bmtRegister"
              },{
                "name": "上传模板",
                "uri": "/controller/bmtTem"
              },
              
              ],
            },
            {
              "name": "用户管理",
              "uri": "/controller/userManage"
            },
          ]
        }
    },
    name: 'controller',
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }

在router中的index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: resolve => require(['@/views/login'],resolve),
    },
    {
      path: '/controller',
      name: 'controller',
      component: resolve => require(['@/views/controller'],resolve),
      children:[
        {
          path:'/controller/bmtManage',
          name:'bmtManage',
          component: resolve => require(['@/views/controller/bmtManage'], resolve)
        },
        {
          path:'/controller/bmtRegister',
          name:'bmtRegister',
          component: resolve => require(['@/views/controller/bmtRegister'], resolve)
        },
        {
          path:'/controller/bmtTem',
          name:'bmtTem',
          component: resolve => require(['@/views/controller/bmtTem'], resolve)
        },
        {
          path:'/controller/userManage',
          name:'userManage',
          component: resolve => require(['@/views/controller/userManage'], resolve)
        },
      ]
    },
  ]
})

需要注意点是  因为是有子菜单所以我们在route配置的时候是要用到嵌套路由就是把你的子菜单中的路由放在children中去配置即可！