Vue iview-admin框架二级菜单改为三级菜单的方法

这篇文章主要介绍了关于vue iview-admin框架二级菜单改为三级菜单的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

最近在用 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
artical-publish-center.vue结构如下图：  要有标签

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

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

第四步：到这里，容器可以实现期待已久三级菜单了，^_^. 在router里添加三级页面路由，router文件夹下router.js中：
加到appRouter中吧,可以放到title: '组件'的children数组中：

{
                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')
                    }
                ]
            }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

自制vue组件通信插件之用mixin写插件

Vue活动创建项目之路由设计及导航栏的开发