이 글에서는 Vue iview-admin 프레임워크에서 2차 메뉴를 3차 메뉴로 변경하는 방법을 주로 소개하고 있는데 내용이 꽤 좋아서 참고용으로 올려봅니다. .
최근 iview-admin의 Vue 백엔드 템플릿을 사용하고 있는데, git에서 다운로드한 후 왼쪽 네비게이션 바가 2단계 메뉴까지 지원하는 것을 발견했습니다. 3차 메뉴 구현 방법을 문의드립니다. 실제 애플리케이션 시나리오에서는 여전히 3단계 메뉴가 필요합니다. 코드를 직접 변경하는 것 외에는 다른 좋은 방법이 없습니다.
1 첫 번째 단계: 먼저 VUE에서 템플릿을 다시 작성하고, sidebarMenu.vue 파일을 수정하고, 아래와 같이 파일의 특정 디렉터리를 만듭니다.
#🎜 🎜#
메뉴 탐색 메뉴 구성 요소의 두 번째 수준 중첩 구조를 세 번째 수준 중첩으로 변경하는 것은 하위 속성이 있는지 여부와 하위 요소가 포함되어 있는지 확인하는 것 이상입니다. 두 번째 수준 라우팅 페이지인 경우 하위 요소 태그에 의해 직접 생성됩니다.<template> <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu"> <template v-for="item in menuList"> <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name"> <Icon :type="item.children[0].icon || item.icon" :size="iconSize" :key="'menuicon' + item.name"></Icon> <span class="layout-text" :key="'title' + item.name">{{ itemTitle(item.children[0]) }}</span> </MenuItem> <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name"> <template slot="title"> <Icon :type="item.icon" :size="iconSize"></Icon> <span class="layout-text">{{ itemTitle(item) }}</span> </template> <template v-for="child in item.children"> <!-- 添加条件判断是否还有三级菜单 v-if="child.children.length<=1" --> <MenuItem v-if="isThirdLeveMenu(child)==false" :name="child.name" :key="'menuitem' + child.name"> <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon> <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span> </MenuItem> <!-- 以下为新增 添加条件判断如果有三级菜单 则增加三级菜单 --> <Submenu v-if="isThirdLeveMenu(child)==true" :name="child.name" :key="'menuitem' + child.name"> <template slot="title"> <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon> <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span> </template> <template v-for="son in child.children"> <MenuItem :name="son.name" :key="'menuitem' + son.name"> <Icon :type="son.icon" :size="iconSize" :key="'icon' + son.name"></Icon> <span class="layout-text" :key="'title' + son.name">{{ itemTitle(son) }}</span> </MenuItem> </template> </Submenu> <!-- 以上为新增 --> </template> </Submenu> </template> </Menu> </template># 🎜🎜#
구성 요소의 메소드 아래에 isThirdLeveMenu 메소드를 추가하여 하위 속성이 포함되어 있는지 확인합니다. 2단계: 현재 경로를 생성하는 논리적 방법을 수정합니다: libs 폴더 아래의 util.js 파일에서: # 🎜🎜#
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; } } },
#🎜🎜 #3단계: 예술적 3단계 페이지 test-child.vue, testcaca.vue 및 3단계 라우팅 컨테이너 구성 요소 만들기-Publish-center.vue
artical-publish-center.vue의 구조는 다음과 같습니다. b3494c54b4407fee5bd49358468b38f4 태그가 있어야 합니다.Others 두 개의 3단계 페이지 vue가 아무렇지도 않게 작성했습니다.
#🎜 🎜#
4단계: 이 시점에서 컨테이너는 오랫동안 기다려온 3단계 메뉴 ^_ ^를 라우터에 추가할 수 있습니다. 라우터 폴더:
. appRouter에 추가하세요. 제목:
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<childArr.length;m++){ if(!childArr[m].children) continue; let sonArr = childArr[m].children; for(let n=0;n<sonArr.length;n++){ if(sonArr[n].name === name){ hasMenu = true; return hasMenu; } } } } return false; } })[0]; if (currentPathObj.children.length <= 1 && currentPathObj.name === 'home') { currentPathArr = [ { title: '首页', path: '', name: 'home_index' } ]; } else if (currentPathObj.children.length <= 1 && currentPathObj.name !== 'home') { currentPathArr = [ { title: '首页', path: '/home', name: 'home_index' }, { title: currentPathObj.title, path: '', name: name } ]; } else { //如果是三级页面按钮,则在二级按钮数组中找不到这个按钮名称 //需要二级页面下可能出现三级子菜单的情况逻辑加入 let childObj = currentPathObj.children.filter((child) => { 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; };
마지막으로 프로젝트를 저장하고 실행하면 3단계 메뉴가 나타나는지 확인하세요.
#🎜🎜 #
위 내용은 이 글의 전체 내용입니다. . 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 Vue iview-admin 프레임워크에서 2차 메뉴를 3차 메뉴로 변경하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!