Vue實作狗尾草部落格背景管理系統第三章
本章節，咱們開發管理系統側邊欄及面包屑功能。
先上一張效果圖
樣式呢，作者前端初審，關于設計上毫無美感可言，大家可根據自己情況設計更好看的哦~
這裡我們借助element的aslide側邊欄，直接使用。
在components>commons下建立Aslide.vue，Header.vue元件。分别作為我們的側邊欄和頭部元件。
Aslide内容，我們直接使用el-menu及相關側邊欄元件。不過要仔細閱讀以下官方文檔，否則使用會比較費勁。
collapse 是否水準折疊收起菜單（僅在 mode 為 vertical 時可用） boolean false default-active default-active string default-openeds 目前打開的 sub-menu 的 index 的數組 Array unique-opened 是否隻保持一個子菜單的展開 boolean false router 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉 boolean false 以上就是主要的屬性，我們要仔細閱讀加以了解。
這裡的側邊欄的話，因為我們需要注意的是
如果目前展開菜單為2級的某一菜單，那麼在頁面重新整理後和浏覽器回退後，也依然要展開。
不同的角色登入後，所擁有的權限是不同的。這裡我麼可以做成較為簡單的，前端處理，控制某些菜單顯示來實作，當然。後期如果有時間，後端也是需要對接口做權限校驗的！
那麼，我麼開始吧~
首先，我們可以複制elementui的代碼過來，直接放到Aslide.vue檔案中，然後引用，都是沒有問題的。
下來我們就要開始改造了。
因為要做權限的管理，我們這裡要控制菜單的顯示，是以這裡，我們不再頁面中寫死，這裡給提供兩種解決方案：
在static中配置靜态的menu.json檔案，将我們的菜單欄加以不同的角色進行配置，然後在頁面中根據登入後的權限，進行動态控制顯示對應角色的菜單欄。
将菜單欄放到store中管理。getters直接解構取值獲得并使用。(這裡之是以放在store中，是因為後面如果後端配合使用權限控制，那麼我們就需要後端傳回菜單欄資訊，并格式化轉換為我們的路由資訊。實作動态路由的使用~)，當然，因為是自己的管理平台，MD還是懶~
這裡，我們先一起采用store的方式來存儲menu.json檔案吧
大家先按照如圖所示補全目錄。
我們，将menu檔案存儲在store>modules>aslide.js檔案中：
除了，菜單資訊外，後面所涉及的header中控制菜單的展開折疊的方法，我們也一并放置在狀态中進行管理。
getters.js檔案如下
簡單說就是為了後期mapGetters的使用，友善我們去取state中的資料，使用更加友善~
index.js檔案：
store檔案基本的配置也就算是完成了，下來我們需要在main.js中引入
側邊欄的配置已經好了，但是還沒有使用。下來我們補全一些其他的頁面資訊。
内容可以随便寫成标志性的内容，這都不是重點。
重點是Aslide.vue檔案中的引用：
之是以要寫watch監聽，是因為上面我們說到過的頁面重新整理後，也依然要保持菜單欄的點選和展開狀态。當然也可以使用本地緩存區實作，不過就有點小題大做了。
另外，這裡之是以不惜消耗性能的去循環的時候去判斷，是因為我們可能有單個的一級菜單。這個時候他是不需要展開的，是以種種狀态我們都需要去做判斷。
具體的實作思路：
active要求為字元串，且:router="true"這個屬性的開關直接控制了是否将index作為路由進行跳轉。
這裡給大家提供兩種實作思路：
第一種：我們可以給給個菜單配置單獨的下标，我們可以寫死，比如：'1'，'1-1'，'1-2'，'2'，'2-1'，'2-2',采用這種方式去标記，去差別。(這種方式的使用，我們需要将router設定為false，否則話跳轉到1-1.。。根本不是我們想要的。)。
第二種：：router="true"。設定為true後，下标就會作為路由進行跳轉。我們就需要将下标設定為路由的路徑。
當然兩種方法的差別就是，一個是寫死的下标。一個是路徑作為下标。都要求我們在配置json檔案的時候主要需要的參數。
Next，下來我們就要去Layout布局元件中引入我們的側邊欄啦
Layout:
需要注意的是：這裡引入的時候沒有用Header代表頭部元件和Aslide代表側邊欄元件，是因為這些元件在原生的h5中含有相同的标簽，難免造成混淆。作者曾經在使用MpVue開發小程式的過程中，就因為沒有差別，是以報了一個error，讓我頭疼了好久~
大家可以暫時先把上面的面包屑和header引入先關掉，這裡不是還沒配置嘛。不關閉的話，會報錯哦。
Next，非常重要的一個環節。側邊欄我們已經配置好了,我們要對路由進行配置。不過這裡。我們需要先将我們原來設定的登入攔截給管理。
在路由中設定auth為false
接着，我們隻需要按照剛才建立的檔案的目錄去補全路由：
router/index.js
這裡，我們新增了404路由和通配符。在比對不到路由時，就會跳轉到404頁面，當然我們也需要在pages中建立error檔案 pages>error>index.vue
細心的同學會發現路由我也都配置了name。這個name就是配置面包屑而準備哒。需要值得注意的是，路由中name的配置，不能有相同項，雖然不影響使用不會報錯，但是控制台會出現一個warn告訴我們避免相同的name。
嘿嘿嘿~下來我們就可以配置我們的BreadCrumbs了。
BreadCrumbs面包屑導航 什麼事面包屑導航呢？ 可以了解為目前路由資訊的導航提示，并随着路由的改變而改變。
elemnt-ui面包屑元件的使用：
一個數組，裡頭有很多對象，對象為路由的資訊。如果有路徑就是可以跳轉，如果沒有就不能通過面包屑挑戰。
eg:
[{ path:'/',name:"首頁"
},{ name:"标簽"
}]
這裡的最終顯示效果就為： 首頁 > 标簽
首頁是可以點選的。标簽頁則不可以點選。
知道了元件需要什麼我們就好整理資料啦。
這裡我們實作的思路為：
使用路由的this.$route.matched來實作
matched可以傳回一個數組，該數組彙總含有目前路由的所有parent資訊。
我們定義的name和path也都有。我們就隻需要在路由變化的時候去改變傳給面包屑的數組即可。
在components>commons>Crumbs.vue檔案
上菜Crumbs.vue：
這面包屑配置就ok啦。當然，menu，router和面包屑三者有一個有問題都會造成問題。是以還是挺複雜的。面包屑元件寫好了。我們就在layout中将面包屑打開即可。
我們因為已經在store中配置好了collapse是以下來要實作按鈕控制收縮，我們就需要調用store方法即可.
直接上Header.vue碼：
第二章的内容就完成了，在開發完成後記得推送到倉庫哦！
信心的你，或許發現了。我在元素便利的時候key給的是這樣的+new Date() + index；
學到了麼？這樣寫的話，不會造成index重複造成的error。
另外以上所有内容中用到的圖示都是element-ui自帶的圖示。
iconfont的倉庫配置和引入
頁面開發~
作者：狗尾草-----------------------------------------
個性簽名：海到無邊天作岸，山登絕頂人為峰！