Home > Article > Web Front-end > How to change the second-level menu to the third-level menu in the Vue iview-admin framework
This article mainly introduces the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework. It has a certain reference value. Now I share it with you. Friends in need can refer to it
Recently, I have 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:
Change the second-level nesting structure of the Menu navigation menu component 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 child elements. If so, directly v-for loop generates children. Element tag, the new structure is as follows:
<template>
<menu>
<template>
<menuitem>
<icon></icon>
<span>{{ itemTitle(item.children[0]) }}</span>
</menuitem>
<submenu> 1" :name="item.name" :key="item.name">
<template>
<icon></icon>
<span>{{ itemTitle(item) }}</span>
</template>
<template>
<!-- 添加条件判断是否还有三级菜单 v-if="child.children.length<=1" -->
<menuitem>
<icon></icon>
<span>{{ itemTitle(child) }}</span>
</menuitem>
<!-- 以下为新增 添加条件判断如果有三级菜单 则增加三级菜单 -->
<submenu>
<template>
<icon></icon>
<span>{{ itemTitle(child) }}</span>
</template>
<template>
<menuitem>
<icon></icon>
<span>{{ itemTitle(son) }}</span>
</menuitem>
</template>
</submenu>
<!-- 以上为新增 -->
</template>
</submenu>
</template>
</menu>
</template>
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 logic of creating the current path Method: 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 {
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 <p><strong> Step 3: Create three-level pages test-child.vue, testcaca.vue and three-level routing The structure of the container component artistic-publish-center.vue</strong><br><strong>artical-publish-center.vue is as follows: It must have the <rout-view> tag</rout-view></strong></p><p><img src="https://img.php.cn//upload/image/524/766/974/1531115697133053.png" title="1531115697133053.png" alt="How to change the second-level menu to the third-level menu in the Vue iview-admin framework"> </p><p>Vue wrote the other two third-level pages casually: </p><p><img src="https://img.php.cn//upload/image/142/703/339/1531115707261749.png" title="1531115707261749.png" alt="How to change the second-level menu to the third-level menu in the Vue iview-admin framework"></p><p><strong>Step 4: At this point, the container can realize the long-awaited third level Menu, ^_^. Add a third-level page route in the router. In router.js under the router folder: </strong><br>. Add it to appRouter. You can put it in the children array of title: 'Component': </p><pre class="brush:php;toolbar:false">{
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 look at the third-level menu coming out:
The above is the entire article Content, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Self-made vue component communication plug-in using mixin to write plug-ins
Vue activity creation project design And development of navigation bar
The above is the detailed content of How to change 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!