面包屑應(yīng)該是我們在項(xiàng)目中經(jīng)常使用的一個功能，一般情況下它用來表示我們當(dāng)前所處的站點(diǎn)位置，也可以幫助我們能夠更快的回到上個層級。

今天我們就來聊聊如何在 Vue 的項(xiàng)目中實(shí)現(xiàn)面包屑功能。以下案例都是使用 Element-UI 進(jìn)行實(shí)現(xiàn)。

最笨的方式

首先我們想到的最笨的方法就是在每個需要面包屑的頁面中固定寫好。

<template> <div class="example-container">  <el-breadcrumb separator="/">   <el-breadcrumb-item    v-for="(item,index) in breadList"    :key="index"    :to="{ path: item.path }"   >{{item.name}}</el-breadcrumb-item>  </el-breadcrumb> </div></template><script>export default { name: "Example", data() {  return {   breadList: [{     name: "首頁",     path: "/home"    }, {     name: "系統(tǒng)設(shè)置",     path: "/setting"    }, {     name: "用戶管理",     path: "/setting/usermanage"    }]  }; }};</script>

如果按照上述方式去實(shí)行的話，雖然我們可以完成面包屑的功能，但是它不夠靈活，在每個需要的頁面添加，帶來的維護(hù)成本是巨大的。

最主要的是你們的產(chǎn)品天天變需要咋辦，還不累死。有人說登哥我就喜歡這么改，只有這樣我才會有工作量。

好吧那當(dāng)我沒說，但是我勸你善良，登哥勸你一句，把那些大量重復(fù)的工作盡可能的趕緊做完，剩下的時間你才能自由安排，進(jìn)行充能呀。

否則，你拿什么進(jìn)步？普通的人總是喜歡抱怨沒有時間，而優(yōu)秀的人就是這么把時間省下來的。他們知道什么事情重要，什么事情不重要。

不過還是有人會說我就想安安靜靜寫寫代碼，其他的我不想。那也行，不過這樣寫顯然不夠逼格。

利用 路由元信息

上面的方法，非常的不夠逼格，顯然不是我們想要的，那我們再來看看第二種實(shí)現(xiàn)方式。

我們可以把路徑結(jié)構(gòu)配置在 Route meta 屬性中。

const router = new Router({ routes: [{   path: '/example',   name: 'example',   component: Example,   meta: {    breadList: [{      name: "首頁",      path: "/home"     }, {      name: "系統(tǒng)設(shè)置",      path: "/setting"     }, {      name: "用戶管理",      path: "/setting/usermanage"     }]   }  } ]});export default router;

然后我們直接在頁面中使用計(jì)算屬性獲取數(shù)據(jù)。

<template> //...省略</template><script>export default { name: "Example", computed: {  breadList() {   return this.$route.meta.breadList || [];  } }};</script>

這樣也能實(shí)現(xiàn)我要想的效果，但是這個還是顯得比較冗余，路由數(shù)據(jù)已經(jīng)定義好一次結(jié)構(gòu)，還要加上一個專門的面包屑數(shù)據(jù)，造成代碼的重復(fù)，還是不夠逼格。

那接下來登哥教你一招比較有逼格的。準(zhǔn)備好小本本記下來。