Vue動態(tài)面包屑功能的實現方法

更新時間：2019年07月01日 10:13:19 作者：六小登登

面包屑功能是我們在項目中經常遇到的功能，今天小編使用Element-UI 進行實現在vue項目中實現面包屑功能，具體實現方式大家跟隨小編一起學習吧

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

今天我們就來聊聊如何在 Vue 的項目中實現面包屑功能。以下案例都是使用 Element-UI 進行實現。

最笨的方式

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

<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: "系統設置",
     path: "/setting"
    }, {
     name: "用戶管理",
     path: "/setting/usermanage"
    }]
  };
 }
};
</script>

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

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

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

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

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

利用路由元信息

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

我們可以把路徑結構配置在 Route meta 屬性中。

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

然后我們直接在頁面中使用計算屬性獲取數據。

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

這樣也能實現我要想的效果，但是這個還是顯得比較冗余，路由數據已經定義好一次結構，還要加上一個專門的面包屑數據，造成代碼的重復，還是不夠逼格。

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

路由對象 matched 屬性

首先我們先來看看官方對 matched 的介紹。

matched：返回一個數組，包含當前路由的所有嵌套路徑片段的路由記錄。

可以看到當我們定義好路由結構以后，我們就可以獲取到當前頁面的路由記錄。

首先我們先創(chuàng)建一個面包屑的組件。

//Breadcrumb.vue
<script>
export default {
 data() {
  return {
   breadList: [] // 路由集合
  };
 },
 watch: {
  $route() {
   this.getBreadcrumb();
  }
 },
 methods: {
  isHome(route) {
   return route.name === "home";
  },
  getBreadcrumb() {
   let matched = this.$route.matched;
   //如果不是首頁
   if (!this.isHome(matched[0])) {
    matched = [{ path: "/home", meta: { title: "首頁" } }].concat(matched);
   }
   this.breadList = matched;
  }
 },
 created() {
  this.getBreadcrumb();
 }
};
</script>

創(chuàng)建完組件之后，在需要的地方注入即可。如果你的網頁結構布局合理恰當的話只需要一處引用就可以所有網頁使用啦。

真可謂 “一處代碼供全局”。

定義的路由信息如下：

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/home'
  },
  {
   path: '/home',
   name: 'home',
   component: Home,
   meta: { title: '首頁' }
  },
  {
   path: '/setting',
   name: "setting",
   component: () => import('./views/setting/Setting.vue'),
   redirect: '/setting/user',
   meta: { title: '系統設置' },
   children: [{
    path: 'user',
    component: () => import('./views/setting/UserMange.vue'),
    name: 'usermanage',
    meta: { title: '用戶管理' }
   }, {
    path: 'message',
    component: () => import('./views/setting/MesMange.vue'),
    name: 'mesmanage',
    meta: { title: '短信管理' }
   }]
  },
  {
   path: '/example',
   name: 'example',
   component: Example,
   meta: { title: '綜合實例' }
  }
 ]
});
export default router;

可以看到我們非常靈活的實現出我們需要的效果。可能這個功能并沒有完善，比如有些頁面不需要怎么辦？

其實只要我們過濾下數據就可以實現，比如利用 meta 不存在時面包屑數據置空，或者增加一個數據標示面包屑的現實隱藏。等等都是一種思路。小伙伴們不妨發(fā)揮自己的想象試試吧。

看十遍不如自己擼一遍。這樣很快就能掌握知識點。最后上下效果圖給大家觀摩。