使用vue+element创建三级导航

废话不多说 直接上代码

HTML

<template>
    <div>
        <el-menu 
        class="el-menu-demo" 
        mode="vertical" 
        @select="handleSelect" 
        @click='enter()'
        @mouseout='leave'
        :unique-opened='true'>
            <div v-for="(firstItem,firstIndex) in list" :key="'first'+firstIndex">
                  <!--el-submenu 为菜单列表，含有箭头，在children.length大于0的时候使用-->
                <el-submenu :index="firstItem.path" v-if="firstItem.children&&firstItem.children.length!==0">
                <template slot="title"><i :class="firstItem.icon"></i><span>{{firstItem.name}}</span></template>
                    <div v-for="(secondItem,secondIndex) in firstItem.children" :key="'second'+secondIndex">
                            <el-submenu v-if="secondItem.children&&secondItem.children.length!==0" :index="secondItem.path">
                            <template slot="title">{{secondItem.name}}</template>
                                <!-- 因为三级菜单下面没有四级所以不需要if判断这样的话就不用再套上一层div -->
                                <el-menu-item
                                :index="thirdItem.path"
                                iscustom="true"
                                v-for="(thirdItem,thirdIndex) in secondItem.children"
                                :key="'third'+thirdIndex"
                                @mouseout.native="aac()"
                                @click="goPath(thirdItem.path,thirdItem.name)">
                                <template slot="title">{{thirdItem.name}}</template>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item
                                    :index="secondItem.path"
                                    v-else
                                    @click="goPath(secondItem.path,secondItem.name)">
                            <template slot="title">{{secondItem.name}}</template>
                            </el-menu-item>
                    </div>
                </el-submenu>
                  <!--在children.length等于0时，使用不带箭头的菜单-->
                <el-menu-item :index="firstItem.path"  @click="goPath(firstItem.path,firstItem.name)" v-else>
                    <template slot="title"><i class="el-icon-delete"></i>{{firstItem.name}}</template>
                </el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

JS

    export default {
        name: 'ProductCenter',
        data() {
            return {
                isCollapse: true,
                mode: 'horizontal',
                menuDoms: [],
                list: [
                    {
                        path: "/index",
                        name: "首页",
                        icon: 'el-icon-menu',
                    },
                    {
                        path: "/index110",
                        name: "导航666",
                        icon: 'el-icon-menu',
                        children: [
                            {
                                path: "/index110-1",
                                name: "666-1",
                                children: [
                                    {
                                        path: "/TransportVehicle",
                                        name: "导航1-1",
                                    },
                                    {
                                        path: "/ProductCenter",
                                        name: "导航1-2",
                                    },
                                    {
                                        path: "/6-3",
                                        name: "导航1-3",
                                    }
                                ]
                            },
                            {
                                path: "/index112",
                                name: "666-2",
                            }
                        ]
                    },
                ]

            }
        }
  }        

记得router目录配置好哦 否则会报错