摘要：運(yùn)行一下，發(fā)現(xiàn)路由變了，當(dāng)前項(xiàng)有標(biāo)識(shí)了，子菜單的顯示與隱藏也有了原理也很簡(jiǎn)單。

上篇文章(webpack+vue項(xiàng)目實(shí)戰(zhàn)（一,搭建運(yùn)行環(huán)境和相關(guān)配置）)搭建了好了基本的一個(gè)項(xiàng)目目錄，安好好了一些要用到的依賴，以及把項(xiàng)目跑了起來(lái)。接下來(lái)，我們就進(jìn)行第二步的操作，第二步就是做好一個(gè)開(kāi)發(fā)系統(tǒng)的主頁(yè)面，這個(gè)頁(yè)面主要也就是一個(gè)側(cè)邊欄，通過(guò)側(cè)邊欄的各個(gè)選項(xiàng)來(lái)進(jìn)行操作（切換各個(gè)組件）。比如回款管理，訂單管理，物流管理等等的操作。

開(kāi)始屬于排版這一塊了，是時(shí)候在index.js引入一個(gè)公用樣式了,相當(dāng)于一個(gè)樣式重置表。

需求有一個(gè)，頁(yè)面上面需要放一個(gè)退出的登錄按鈕，我就寫(xiě)了一個(gè)頂部組件的文件。首先就是創(chuàng)建這個(gè)文件

代碼如下

然后入口文件(index.js)引用這個(gè)文件，并且在vue中注冊(cè)組件import topbarComponent from "./../components/admin_base/topbar.vue";

然后入口模板文件，index.html引入標(biāo)簽

頁(yè)面結(jié)果（基于上一篇文章，已經(jīng)跑起來(lái)的結(jié)果）

頁(yè)面上的class在公用樣式里面有寫(xiě)好樣式，還有一些樣式是element-ui提供的，
退出登錄就是element-ui提供的組件，在入口文件index.js已經(jīng)引入了element-ui。這里直接用就好！

這個(gè)比較簡(jiǎn)單，我就不多說(shuō)了。

這個(gè)側(cè)邊欄就是這篇文章的重點(diǎn)，也是整個(gè)項(xiàng)目操作的重點(diǎn)。先在目錄上創(chuàng)建這樣一個(gè)的側(cè)邊欄的組件文件。

下面圖片是我們要實(shí)現(xiàn)的效果，那些排版切圖的樣式我不多說(shuō)了，相信不會(huì)難倒大家

從上面的效果圖的看到。有3個(gè)菜單（首頁(yè)，銷售消息通知，銷售管理）。而且首頁(yè)這個(gè)菜單可以點(diǎn)擊，執(zhí)行跳轉(zhuǎn)，其它兩個(gè)菜單又有子菜單，點(diǎn)擊只是一個(gè)子菜單顯示與隱藏的操作。
所以，側(cè)邊欄的數(shù)據(jù)肯定是一個(gè)數(shù)組，并且是一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象至少有四個(gè)屬性(要顯示的文字，跳轉(zhuǎn)的url，是否有子菜單，是否當(dāng)前菜單)。然后對(duì)于有子菜單的菜單，要給一個(gè)屬性控制是否展開(kāi)顯示子菜單，要一個(gè)屬性，儲(chǔ)存子菜單。
如下面文字

[
    {
        菜單名:"菜單名稱(首頁(yè))",
        跳轉(zhuǎn)的url:"url(/index)",
        是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string(0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱(首頁(yè))",
        跳轉(zhuǎn)的url:"url(/index)",
        是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string(0)",
        是否有子菜單:"true||false",
        是否展示:"是否     true||false",
        子菜單:[]
    }
]

對(duì)于子菜單，由于沒(méi)有子菜單了，所以需要三個(gè)屬性（要顯示的文字，跳轉(zhuǎn)的url，是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string(0)"）就好。由于子菜單不止一個(gè)，所以，子子菜單這個(gè)肯定也是一個(gè)數(shù)組，每個(gè)子菜單也有屬性，所以，也是一個(gè)對(duì)象屬性，所以，數(shù)據(jù)大概如下面。

[
    {
        菜單名:"菜單名稱   (首頁(yè))",
        跳轉(zhuǎn)的url:"url  (/index)",
        是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string   (0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱  (首頁(yè))",
        跳轉(zhuǎn)的url:"url  (/index)",
        是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string    (1)",
        是否有子菜單:"是否     true||false",
        是否展示:"是否    true||false",
        子菜單:[
            {
                菜單名:"菜單名稱    (首頁(yè))",
                跳轉(zhuǎn)的url:"url   (/index)",
                是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string   (1_1)"
            },
            {
                菜單名:"菜單名稱   (首頁(yè))",
                跳轉(zhuǎn)的url:"url   (/index)",
                是否當(dāng)前標(biāo)識(shí):"一個(gè)標(biāo)志string   (1_2)"
            }
        ]
    }
]

最后，整理出來(lái)的數(shù)據(jù)就是?。╰ag這個(gè)標(biāo)識(shí)數(shù)據(jù)，是我自己起的，大家也可以隨意起。這個(gè)標(biāo)識(shí)在下面會(huì)用到，在這里可以暫時(shí)不關(guān)注）

data(){
    return {
        currentTag: "0",
        menus: [
            {
                name: "首頁(yè)",
                url: "/index",
                tag: "0",
                hasExtend: false, //是否有二級(jí)菜單
            },
            {
                name: "銷售消息通知",
                url: "/saleR",
                tag: "sale",
                hasExtend: true, //是否有二級(jí)菜單
                fold: true, //是否展開(kāi)
                extend: [
                    {
                        name: "待確認(rèn)訂單",
                        url: "/order/list/0?ordConfirmStatus=0",
                        tag: "1_1",
                    },
                    {
                        name: "待出庫(kù)物流",
                        url: "/logistics/logisticsList/0",
                        tag: "1_2"
                    },
                    {
                        name: "待發(fā)貨物流",
                        url: "/logistics/logisticsList/1",
                        tag: "1_3"
                    },
                    {
                        name: "待收貨物流",
                        url: "/logistics/logisticsList/2",
                        tag: "1_4"
                    },
                    {
                        name: "待確認(rèn)回款",
                        url: "/cash/cashList/0",
                        tag: "1_5"
                    },
                    {
                        name: "待開(kāi)票申請(qǐng)",
                        url: "/invoice/invoiceWriteList/0",
                        tagIndex: "1_6"
                    }
                ]
            },
            {
                name: "銷售管理",
                url: "/workbench",
                hasExtend: true, //是否有二級(jí)菜單
                fold: true,  //是否展開(kāi)
                extend: [
                    {
                        name: "創(chuàng)建銷售單",
                        url: "/order/create",
                        tag: "2_1"
                    },
                    {
                        name: "銷售單管理",
                        url: "/order/list",
                        tag: "2_2"
                    },
                    {
                        name: "物流管理",
                        url: "/logistics/logisticsList",
                        tag: "2_3"
                    },
                    {
                        name: "回款管理",
                        url: "/cash/cashList",
                        tag: "2_4"
                    },
                    {
                        name: "開(kāi)票管理",
                        url: "/invoice/invoiceWriteList",
                        tag: "2_9"
                    },
                    {
                        name: "票據(jù)管理",
                        url: "/invoice/invoiceManageList",
                        tag: "2_5"
                    },
                    {
                        name: "提成管理",
                        url: "/commission/commissionList",
                        tag: "2_6"
                    },
                    {
                        name: "提成設(shè)置",
                        url: "/commission/commissionSet",
                        tag: "2_7",
                    },
                    {
                        name: "合同管理",
                        url: "/contract/contractList",
                        tag: "2_8"
                    },
                ]
            },
        ],
    }
},

上面的數(shù)據(jù)相信大家都沒(méi)什么問(wèn)題，一一對(duì)應(yīng)上就好（name--菜單名稱, url--跳轉(zhuǎn)的url,tag--當(dāng)前的標(biāo)識(shí), hasExtend--是否有二級(jí)菜單，fold--是否展開(kāi)extend--子菜單）

flod和switchNav這個(gè)兩個(gè)屬性大家暫時(shí)不需要關(guān)注，下面會(huì)用到

遍歷數(shù)據(jù)這個(gè)，大家看了上面的代碼和注釋，很好理解。我就不多說(shuō)了！然后，在index.js里面，引入和注冊(cè)這個(gè)組件。

然后index.html頁(yè)面引用

然后ctrl+s一下，就可以看到效果了（前面在webpack.config.label.js已經(jīng)配置了熱刷新。所以直接就可以看到效果，保存一下，或者改了一些代碼后，一段時(shí)間沒(méi)操作了，瀏覽器都會(huì)刷新，如下圖）

看到運(yùn)行結(jié)果，側(cè)邊欄出來(lái)了。然后，下一步！

關(guān)于側(cè)邊欄的操作，比較簡(jiǎn)單，無(wú)非就是點(diǎn)擊菜單，跳轉(zhuǎn)路由，標(biāo)志當(dāng)前項(xiàng)以及菜單下面子菜單的顯示與隱藏。
1.首先，觸發(fā)路由的跳轉(zhuǎn)和標(biāo)志當(dāng)前項(xiàng)
我們用到的是是上面代碼的switchNav這個(gè)方法;
我們簡(jiǎn)單分析一下，這個(gè)方法，要實(shí)現(xiàn)跳轉(zhuǎn)路由，標(biāo)志當(dāng)前項(xiàng)。就必須要接收兩個(gè)參數(shù)（要跳轉(zhuǎn)路由的url,當(dāng)前的標(biāo)識(shí)）。下面就實(shí)現(xiàn)下

switchNav(url,tag){
    //標(biāo)識(shí)當(dāng)前導(dǎo)航
    this.currentTag = tag;
    //router導(dǎo)航
    this.$router.push({
        "path": url,
        "query": {
            "tag": tag
        }
    });
}

看著代碼是不是特別簡(jiǎn)單，每次點(diǎn)擊的時(shí)候，用一個(gè)變量this.currentTag記錄當(dāng)前的tag，在html遍歷的時(shí)候，如果遍歷道的tag等于currentTag的話，就加上active的類名，標(biāo)志當(dāng)前項(xiàng)，不等于就不加類名。

比如一開(kāi)始‘this.currentTag="0",然后，首頁(yè)的tag又是等于"0"，所以遍歷道‘首頁(yè)’的時(shí)候，就會(huì)給‘首頁(yè)’那個(gè)菜單加上active的類名’

然后跳轉(zhuǎn)路由那個(gè)沒(méi)有什么可以說(shuō)的了，就把url當(dāng)成參數(shù)傳進(jìn)去而已。

2.最后，實(shí)現(xiàn)菜單下面子菜單的顯示與隱藏。這個(gè)方法就一行代碼。

 //展開(kāi)收起導(dǎo)航面板
flod(index){
    this.menus[index].fold = !this.menus[index].fold;
},

因?yàn)橹挥袃杉?jí)，所以，只是根據(jù)傳進(jìn)來(lái)的索引（index）來(lái)操作menus這個(gè)數(shù)組而已，把要操作的項(xiàng)的fold屬性，取反。

運(yùn)行一下，發(fā)現(xiàn)路由變了，當(dāng)前項(xiàng)有標(biāo)識(shí)了，子菜單的顯示與隱藏也有了！原理也很簡(jiǎn)單。

運(yùn)行完了，附上這個(gè)文件(snav-component.vue)的代碼大概就是這樣

有一點(diǎn)要注意下，除了點(diǎn)擊首頁(yè)能看到一張圖片之外，點(diǎn)擊其它的菜單，右邊都是白色的一片。因?yàn)槠渌牟藛蔚膗rl。并沒(méi)有對(duì)應(yīng)的組件。

比如：這個(gè)url在路由里面并沒(méi)有對(duì)應(yīng)的組件。

怎么知道？在上一篇文件說(shuō)到的router.js里面，并沒(méi)有配置‘/order/list/0?ordConfirmStatus=0’這個(gè)url對(duì)應(yīng)的組件。所以在index.html的輸出的就是空白的一片?，F(xiàn)在這里算是復(fù)習(xí)上一篇的內(nèi)容了。也是給下一篇埋了一個(gè)伏筆。下一篇就講這個(gè)配置。

今天就到這里了。主要就是一個(gè)主頁(yè)面，主要是側(cè)邊欄的一個(gè)開(kāi)發(fā)。這個(gè)側(cè)邊欄就是根據(jù)控制錄用的變化。技術(shù)棧主要也就是vue和vue-router。原理就是根據(jù)路由的變化執(zhí)行組件的切換。達(dá)到一個(gè)頁(yè)面跳轉(zhuǎn)的效果。下一篇就會(huì)說(shuō)到，配置路由和路由對(duì)應(yīng)的組件。希望能幫到大家。最后還是那句老話-如果大家發(fā)現(xiàn)我哪里寫(xiě)錯(cuò)了，或者是哪里寫(xiě)得不好，歡迎指點(diǎn)下。