最近在用 iview-admin的Vue后台模板，从git上下载后发现左侧导航栏最多支持到二级菜单,也发现很多童鞋在问如何实现三级菜单。在实际的应用场景中还是会出现三级菜单的需求的，木有其他好办法，只能自己手动改代码了。

1. 第一步：首先改写VUE中的模板，修改sidebarMenu.vue文件，文件具体目录建下图：

将Menu导航菜单组件的的二级嵌套结构改为三级嵌套，无非就是判断二级路由页面下是否有children属性及是否含有子元素，有的话直接v-for循环生成子元素标签，新结构如下：

组件中methods下添加一个方法isThirdLeveMenu,判断是否含有children属性:

methods: {    changeMenu(active) {      this.$emit("on-change", active);    },    itemTitle(item) {      if (typeof item.title === "object") {        return this.$t(item.title.i18n);      } else {        return item.title;      }    },    isThirdLeveMenu(child){       if(child.children){           if(child.children.length>0)return true;           else  return false;       }       else {         return false;       }    }  },

第二步：修改创建当前path路径的逻辑方法：setCurrentPath ,在libs文件夹下util.js文件中：

util.setCurrentPath = function (vm, name) {    let title = '';    let isOtherRouter = false;    vm.$store.state.app.routers.forEach(item => {        if (item.children.length === 1) {            if (item.children[0].name === name) {                title = util.handleTitle(vm, item);                if (item.name === 'otherRouter') {                    isOtherRouter = true;                }            }        } else {            item.children.forEach(child => {                if (child.name === name) {                    title = util.handleTitle(vm, child);                    if (item.name === 'otherRouter') {                        isOtherRouter = true;                    }                }            });        }    });    let currentPathArr = [];    //去首页    if (name === 'home_index') {        currentPathArr = [            {                title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),                path: '',                name: 'home_index'            }        ];    }     //去导航菜单一级页面或者OtherRouter路由中的页面    else if ((name.indexOf('_index') >= 0 || isOtherRouter) && name !== 'home_index') {        currentPathArr = [            {                title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),                path: '/home',                name: 'home_index'            },            {                title: title,                path: '',                name: name            }        ];    }     //去导航菜单二级页面或三级页面    else {        let currentPathObj = vm.$store.state.app.routers.filter(item => {            var hasMenu;            if (item.children.length <= 1) {                hasMenu = item.children[0].name === name;                return hasMenu;            } else {                let i = 0;                let childArr = item.children;                let len = childArr.length;                while (i < len) {                    //如果是三级页面按钮，则在二级按钮数组中找不到这个按钮名称                    //需要二级页面下可能出现三级子菜单的情况逻辑加入                    if (childArr[i].name === name) {                        hasMenu = true;                        return hasMenu;                    }                    i++;                }                //如果一级，二级菜单下都没有此按钮名称，则遍历三级菜单                if(!hasMenu){                    for(let m=0;m
    
      {                return  child.name === name;            })[0];           // let thirdLevelObj =           console.log(childObj)           //二级页面            if (childObj) {                currentPathArr = [                    {                        title: '首页',                        path: '/home',                        name: 'home_index'                    },                    {                        title: currentPathObj.title,                        path: '',                        name: currentPathObj.name                    },                    {                        title: childObj.title,                        path: currentPathObj.path + '/' + childObj.path,                        name: name                    }                ];            }            //childobj为undefined，再从三级页面中遍历            else {                let thirdObj;                let childObj = currentPathObj.children.filter((child) => {                    let hasChildren;                    hasChildren = child.name === name;                    if (hasChildren) return hasChildren                    if (child.children) {                        let sonArr = child.children;                        for (let n = 0; n < sonArr.length; n++) {                            if (sonArr[n].name === name) {                                thirdObj = sonArr[n];                                hasChildren = true;                                return hasChildren;                            }                        }                    }                    return hasChildren                })[0];                if(thirdObj && childObj){                    currentPathArr = [                        {                            title: '首页',                            path: '/home',                            name: 'home_index'                        },                        {                            title: currentPathObj.title,                            path: '',                            name: currentPathObj.name                        },                        {                            title: childObj.title,                            path: '',               //设为空是因为此二级菜单没有实际页面且用于面包屑组件显示，path为空的将不可单击                            name: childObj.name                        },                        {                            title: thirdObj.title,                            path: currentPathObj.path + '/' + childObj.path + '/' + thirdObj.path,                            name: thirdObj.name                        }                    ];                }                            }                    }    }        vm.$store.commit('setCurrentPath', currentPathArr);    return currentPathArr;};
    

第三步：建立三级页面test-child.vue,testcaca.vue和三级路由的容器组件artical-publish-center.vue

其他两个三级页面vue随便写了：

第四步：到这里，容器可以实现期待已久三级菜单了，^_^. 在router里添加三级页面路由，router文件夹下router.js中：

{                path: 'artical-publish',                title: '用户配置',                name: 'artical-publish',                icon: 'compose',                component: () => import('@/views/test/artical-publish-center.vue'), //引用三级页面的中间容器层                children:[                    {                        path: 'testcaca',                        icon: 'ios-pause',                        name: 'testcaca',                        title: 'test4',                        component: () => import('@/views/test/testcaca.vue')                    },                    {                        path: 'test-child',                        icon: 'ios-pause',                        name: 'test-child',                        title: 'test-child',                        component: () => import('@/views/test/test-child.vue')                    }                ]            }

最后保存，运行你的项目，看下三级菜单出来了吧：