123啪啪啪,97偷拍视频网站

最近在用 iview-admin的Vue后臺模板，從git上下載后發(fā)現(xiàn)左側(cè)導(dǎo)航欄最多支持到二級菜單，也發(fā)現(xiàn)很多童鞋在問如何實現(xiàn)三級菜單。在實際的應(yīng)用場景中還是會出現(xiàn)三級菜單的需求的，木有其他好辦法，只能自己手動改代碼了。

第一步：首先改寫VUE中的模板，修改sidebarMenu.vue文件，文件具體目錄建下圖：

image

將Menu導(dǎo)航菜單組件的的二級嵌套結(jié)構(gòu)改為三級嵌套，無非就是判斷二級路由頁面下是否有children屬性及是否含有子元素，有的話直接v-for循環(huán)生成子元素標(biāo)簽，新結(jié)構(gòu)如下：

image.png

組件中methods下添加一個方法:

image.png

第二步：修改創(chuàng)建當(dāng)前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'
}
];
}
//去導(dǎo)航菜單一級頁面或者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
}
];
}
//去導(dǎo)航菜單二級頁面或三級頁面
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) {
                //如果是三級頁面按鈕，則在二級按鈕數(shù)組中找不到這個按鈕名稱
                //需要二級頁面下可能出現(xiàn)三級子菜單的情況邏輯加入
                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 {
         //如果是三級頁面按鈕，則在二級按鈕數(shù)組中找不到這個按鈕名稱
         //需要二級頁面下可能出現(xiàn)三級子菜單的情況邏輯加入
        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: '',               //設(shè)為空是因為此二級菜單沒有實際頁面且用于面包屑組件顯示，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結(jié)構(gòu)如下圖：要有<rout-view>標(biāo)簽