Vue手把手帶你擼項目系列之動態麪包屑

時間 2019-11-06

標籤 vue 手把手項目系列動態麪包屑简体版

原文原文鏈接

麪包屑應該是咱們在項目中常用的一個功能，通常狀況下它用來表示咱們當前所處的站點位置，也能夠幫助咱們可以更快的回到上個層級。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>
複製代碼

若是按照上述方式去實行的話，雖然咱們能夠完成麪包屑的功能，可是它不夠靈活，在每一個須要的頁面添加，帶來的維護成本是巨大的。佈局

最主要的是大家的產品每天變須要咋辦，還不累死。有人說登哥我就喜歡這麼改，只有這樣我纔會有工做量。this

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

不然，你拿什麼進步？普通的人老是喜歡抱怨沒有時間，而優秀的人就是這麼把時間省下來的。他們知道什麼事情重要，什麼事情不重要。code

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

利用路由元信息

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

咱們能夠把路徑結構配置在 Route meta 屬性中。cdn

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：返回一個數組，包含當前路由的全部嵌套路徑片斷的路由記錄。

能夠看到當咱們定義好路由結構之後，咱們就能夠獲取到當前頁面的路由記錄。

首先咱們先建立一個麪包屑的組件。

//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>
複製代碼

建立完組件以後，在須要的地方注入便可。若是你的網頁結構佈局合理恰當的話只須要一處引用就能夠全部網頁使用啦。

真可謂「一處代碼供全局」。

定義的路由信息以下：

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 不存在時麪包屑數據置空，或者增長一個數據標示麪包屑的現實隱藏。等等都是一種思路。小夥伴們不妨發揮本身的想象試試吧。

看十遍不如本身擼一遍。這樣很快就能掌握知識點。最後上下效果圖給你們觀摩。