摘要：運行一下，發現路由變了，當前項有標識了，子菜單的顯示與隱藏也有了原理也很簡單。

上篇文章(webpack+vue項目實戰（一,搭建運行環境和相關配置）)搭建了好了基本的一個項目目錄，安好好了一些要用到的依賴，以及把項目跑了起來。接下來，我們就進行第二步的操作，第二步就是做好一個開發系統的主頁面，這個頁面主要也就是一個側邊欄，通過側邊欄的各個選項來進行操作（切換各個組件）。比如回款管理，訂單管理，物流管理等等的操作。

開始屬于排版這一塊了，是時候在index.js引入一個公用樣式了,相當于一個樣式重置表。

需求有一個，頁面上面需要放一個退出的登錄按鈕，我就寫了一個頂部組件的文件。首先就是創建這個文件

代碼如下

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

然后入口模板文件，index.html引入標簽

頁面結果（基于上一篇文章，已經跑起來的結果）

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

這個比較簡單，我就不多說了。

這個側邊欄就是這篇文章的重點，也是整個項目操作的重點。先在目錄上創建這樣一個的側邊欄的組件文件。

下面圖片是我們要實現的效果，那些排版切圖的樣式我不多說了，相信不會難倒大家

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

[
    {
        菜單名:"菜單名稱(首頁)",
        跳轉的url:"url(/index)",
        是否當前標識:"一個標志string(0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱(首頁)",
        跳轉的url:"url(/index)",
        是否當前標識:"一個標志string(0)",
        是否有子菜單:"true||false",
        是否展示:"是否     true||false",
        子菜單:[]
    }
]

對于子菜單，由于沒有子菜單了，所以需要三個屬性（要顯示的文字，跳轉的url，是否當前標識:"一個標志string(0)"）就好。由于子菜單不止一個，所以，子子菜單這個肯定也是一個數組，每個子菜單也有屬性，所以，也是一個對象屬性，所以，數據大概如下面。

[
    {
        菜單名:"菜單名稱   (首頁)",
        跳轉的url:"url  (/index)",
        是否當前標識:"一個標志string   (0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱  (首頁)",
        跳轉的url:"url  (/index)",
        是否當前標識:"一個標志string    (1)",
        是否有子菜單:"是否     true||false",
        是否展示:"是否    true||false",
        子菜單:[
            {
                菜單名:"菜單名稱    (首頁)",
                跳轉的url:"url   (/index)",
                是否當前標識:"一個標志string   (1_1)"
            },
            {
                菜單名:"菜單名稱   (首頁)",
                跳轉的url:"url   (/index)",
                是否當前標識:"一個標志string   (1_2)"
            }
        ]
    }
]

最后，整理出來的數據就是！（tag這個標識數據，是我自己起的，大家也可以隨意起。這個標識在下面會用到，在這里可以暫時不關注）

data(){
    return {
        currentTag: "0",
        menus: [
            {
                name: "首頁",
                url: "/index",
                tag: "0",
                hasExtend: false, //是否有二級菜單
            },
            {
                name: "銷售消息通知",
                url: "/saleR",
                tag: "sale",
                hasExtend: true, //是否有二級菜單
                fold: true, //是否展開
                extend: [
                    {
                        name: "待確認訂單",
                        url: "/order/list/0?ordConfirmStatus=0",
                        tag: "1_1",
                    },
                    {
                        name: "待出庫物流",
                        url: "/logistics/logisticsList/0",
                        tag: "1_2"
                    },
                    {
                        name: "待發貨物流",
                        url: "/logistics/logisticsList/1",
                        tag: "1_3"
                    },
                    {
                        name: "待收貨物流",
                        url: "/logistics/logisticsList/2",
                        tag: "1_4"
                    },
                    {
                        name: "待確認回款",
                        url: "/cash/cashList/0",
                        tag: "1_5"
                    },
                    {
                        name: "待開票申請",
                        url: "/invoice/invoiceWriteList/0",
                        tagIndex: "1_6"
                    }
                ]
            },
            {
                name: "銷售管理",
                url: "/workbench",
                hasExtend: true, //是否有二級菜單
                fold: true,  //是否展開
                extend: [
                    {
                        name: "創建銷售單",
                        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: "開票管理",
                        url: "/invoice/invoiceWriteList",
                        tag: "2_9"
                    },
                    {
                        name: "票據管理",
                        url: "/invoice/invoiceManageList",
                        tag: "2_5"
                    },
                    {
                        name: "提成管理",
                        url: "/commission/commissionList",
                        tag: "2_6"
                    },
                    {
                        name: "提成設置",
                        url: "/commission/commissionSet",
                        tag: "2_7",
                    },
                    {
                        name: "合同管理",
                        url: "/contract/contractList",
                        tag: "2_8"
                    },
                ]
            },
        ],
    }
},

上面的數據相信大家都沒什么問題，一一對應上就好（name--菜單名稱, url--跳轉的url,tag--當前的標識, hasExtend--是否有二級菜單，fold--是否展開extend--子菜單）

flod和switchNav這個兩個屬性大家暫時不需要關注，下面會用到

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

然后index.html頁面引用

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

看到運行結果，側邊欄出來了。然后，下一步！

關于側邊欄的操作，比較簡單，無非就是點擊菜單，跳轉路由，標志當前項以及菜單下面子菜單的顯示與隱藏。
1.首先，觸發路由的跳轉和標志當前項
我們用到的是是上面代碼的switchNav這個方法;
我們簡單分析一下，這個方法，要實現跳轉路由，標志當前項。就必須要接收兩個參數（要跳轉路由的url,當前的標識）。下面就實現下

switchNav(url,tag){
    //標識當前導航
    this.currentTag = tag;
    //router導航
    this.$router.push({
        "path": url,
        "query": {
            "tag": tag
        }
    });
}

看著代碼是不是特別簡單，每次點擊的時候，用一個變量this.currentTag記錄當前的tag，在html遍歷的時候，如果遍歷道的tag等于currentTag的話，就加上active的類名，標志當前項，不等于就不加類名。

比如一開始‘this.currentTag="0",然后，首頁的tag又是等于"0"，所以遍歷道‘首頁’的時候，就會給‘首頁’那個菜單加上active的類名’

然后跳轉路由那個沒有什么可以說的了，就把url當成參數傳進去而已。

2.最后，實現菜單下面子菜單的顯示與隱藏。這個方法就一行代碼。

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

因為只有兩級，所以，只是根據傳進來的索引（index）來操作menus這個數組而已，把要操作的項的fold屬性，取反。

運行一下，發現路由變了，當前項有標識了，子菜單的顯示與隱藏也有了！原理也很簡單。

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

有一點要注意下，除了點擊首頁能看到一張圖片之外，點擊其它的菜單，右邊都是白色的一片。因為其它的菜單的url。并沒有對應的組件。

比如：這個url在路由里面并沒有對應的組件。

怎么知道？在上一篇文件說到的router.js里面，并沒有配置‘/order/list/0?ordConfirmStatus=0’這個url對應的組件。所以在index.html的輸出的就是空白的一片。現在這里算是復習上一篇的內容了。也是給下一篇埋了一個伏筆。下一篇就講這個配置。

今天就到這里了。主要就是一個主頁面，主要是側邊欄的一個開發。這個側邊欄就是根據控制錄用的變化。技術棧主要也就是vue和vue-router。原理就是根據路由的變化執行組件的切換。達到一個頁面跳轉的效果。下一篇就會說到，配置路由和路由對應的組件。希望能幫到大家。最后還是那句老話-如果大家發現我哪里寫錯了，或者是哪里寫得不好，歡迎指點下。