麵包屑應該是我們在專案中經常使用的乙個功能，一般情況下它用來表示我們當前所處的站點位置，也可以幫助我們能夠更快的回到上個層級。
今天我們就來聊聊如何在 vue 的專案中實現麵包屑功能。以下案例都是使用 element-ui 進行實現。
首先我們想到的最笨的方法就是在每個需要麵包屑的頁面中固定寫好。
}
最主要的是你們的產品天天變需要咋辦，還不累死。有人說登哥我就喜歡這麼改，只有這樣我才會有工作量。
好吧那當我沒說，但是我勸你善良，登哥勸你一句，把那些大量重複的工作盡可能的趕緊做完，剩下的時間你才能自由安排，進行充能呀。
否則，你拿什麼進步？普通的人總是喜歡抱怨沒有時間，而優秀的人就是這麼把時間省下來的。他們知道什麼事情重要，什麼事情不重要。
不過還是有人會說我就想安安靜靜寫寫**，其他的我不想。那也行，不過這樣寫顯然不夠逼格。
上面的方法，非常的不夠逼格，顯然不是我們想要的，那我們再來看看第二種實現方式。
我們可以把路徑結構配置在 route meta 屬性中。
const router = new router(, , ]}}
]});
export default router;
//...省略
那接下來登哥教你一招比較有逼格的。準備好小本本記下來。
matched：返回乙個陣列，包含當前路由的所有巢狀路徑片段的路由記錄 。
可以看到當我們定義好路由結構以後，我們就可以獲取到當前頁面的路由記錄。
首先我們先建立乙個麵包屑的元件。
真可謂 「一處**供全域性」。
定義的路由資訊如下：
const router = new router(,},,
children: [
}, }]},}
]});
export default router;
其實只要我們過濾下資料就可以實現，比如利用 meta 不存在時麵包屑資料置空，或者增加乙個資料標示麵包屑的現實隱藏。等等都是一種思路。小夥伴們不妨發揮自己的想象試試吧。
看十遍不如自己擼一遍。這樣很快就能掌握知識點。最後上下效果圖給大家觀摩。
最後，如果覺得文章不錯，對你有所啟發，點讚是一種態度也是一種認可。
推薦：《
vue element搭建專案
前言 使用到的技術和框架及平台外掛程式 git vue vuex element js cookies 步驟 1 配置開發環境 node.js npm v 檢視node版本 vue v 檢視vue版本 vue vue cli 全域性安裝vue vue腳手架 2 新建資料夾，在檔案下初始化專案 vue...
vue element專案做員工排班表
ps 獲取當前時間的常用格式 var today new date var stryear today.getfullyear var strday today.getdate var strmonth today.getmonth 1 var strdate today.getday var no...
如何在Vue Element專案中配置國際化
vue i18n 1 建立i18n資料夾 在專案根目錄，即src目錄項建立i18n目錄，此目錄下用於存放多語言的翻譯如zh.js儲存中文翻譯,en.js儲存英文翻譯，id.js 儲存印尼語等。en.js export default zh.js export default 2 建立preset資料...