背景
? ? 項目中的面包屑導航需要每次在組件中引入、注冊并使用，考慮做優(yōu)化：只引入并注冊使用一次，且要能滿足一些特殊情況
分析
? ? 引入一次的實現(xiàn)比較簡單，只需要在視圖出口或者根組件引入即可
? ? 特殊情況指的是：局部引入、不使用面包屑
? ? ? ? 不使用面包屑比較簡單，只需要做個close標識即可，但是這個標識怎么傳遞給在根組件顯示的面包屑是個問題，比較通俗的做法是使用eventBus或者vuex來發(fā)送一個message，又或者，在全局做一個配置文件，然后在面包屑組件中去讀取，這還不算很麻煩
? ? ? ? 當局部引入時，不僅要關閉全局的面包屑，還要保證局部生效，這也就意味著，我們至少還需要一個屬性來做標識，這樣就比較麻煩了....
改造目標
? ? 既要滿足上述需求，又不需要使用者太麻煩
實現(xiàn)
? ??選擇在app.vue中引入來達到面包屑提升的目的
? ??通過v-close-crumbs關閉全局面包屑，同時允許局部引入使用以滿足特殊用法
? ? ????只要使用者在根元素指定了v-close-crumbs，我們就在loader內(nèi)開始一些增刪操作，這本質(zhì)上是字符串操作
? ? ? ? ? ? 框紅一的位置，對該指令作判斷，只有標記了該屬性的才進入我們的邏輯
? ? ? ? ? ? 框紅二的位置，將指令刪除，否則在vue編譯階段會報指令不存在
? ? ? ? ? ? 框紅三的位置，向面包屑傳遞屬性標識是否是局部使用
? ? ? ? ? ? 框紅四的位置，向全局面包屑發(fā)消息，以控制其顯示或隱藏
? ? ? ? 之后，在面包屑組件作監(jiān)聽，以控制其顯示或隱藏
? ? 最后，將我們的loader發(fā)布到npm后，并在webpack中引用即可
