This article mainly introduces the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework. The content is quite good. I will share it with you now and give it as a reference.
I have recently been using the Vue backend template of iview-admin. After downloading it from git, I found that the left navigation bar supports up to the second-level menu. I also found that many children are asking how to implement the third-level menu. In actual application scenarios, there will still be a need for a three-level menu. There is no other good way but to manually change the code yourself.
1. Step 1: First rewrite the template in VUE, modify the sidebarMenu.vue file, and create the specific directory of the file as shown below:
Navigate Menu The second-level nesting structure of the menu component is changed to a third-level nesting. It is nothing more than determining whether there is a children attribute under the second-level routing page and whether it contains sub-elements. If so, directly v-for loop generates sub-element tags. The new structure is as follows :
Add a method isThirdLeveMenu under methods in the component to determine whether it contains the children attribute:
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; } } },
Step 2: Modify the logical method of creating the current path: setCurrentPath, in the util.js file under the libs folder:
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; };
Step 3: Create three-level pages test-child.vue, testcaca.vue and three-level routing container component artical-publish-center.vue
artical-publish-center.vue structure is as follows: There must be
The other two third-level pages vue wrote casually:
Step 4: Go here , the container can realize the long-awaited third-level menu, ^_^. Add a third-level page routing in the router, in router.js under the router folder:
Add it to appRouter, you can put it in the title: 'component 'In the children array:
{ 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') } ] }
Finally save, run your project, and see the third-level menu come out:
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
About how to use the vue.js carousel chart component
VUE 3D carousel chart package Implementation
The above is the detailed content of About the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
