element中NavMenu配置vue-route

首先element-ui中的NavMenu中是封裝了route的，是以沒有必要像下面這樣子寫

<el-menu-item index="1">
    <i class="el-icon-menu"></i>
    <span slot="title"><router-link to="/home">首頁</router-link></span>
 </el-menu-item>
<router-view></router-view>
           

下面是我寫導航欄的操作

首先看一下template中的代碼

<el-menu
              :default-active="$route.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#344058"
              text-color="#D0D0D0"
              active-text-color="#fff"
              router>
              <div v-for="item,index in mymenu" :key=index>
                <!--存在子菜單-->
                <el-submenu v-if="item.children" :index='item.name'>
                  <template slot="title">
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item v-for="subitem,subindex in item.children" :key=subindex :index='subitem.uri'>
                    {{subitem.name}}
							</el-menu-item>
    
                </el-submenu>
                <!--不存在子菜單-->
                <el-menu-item v-else :index='item.uri'>
                  <!--<i class="el-icon-menu"></i>-->
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </div>
            </el-menu>
           

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中去配置即可！