快捷導(dǎo)航

Vue動(dòng)態(tài)面包屑功能的實(shí)現(xiàn)方法

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

面包屑功能是我們?cè)陧?xiàng)目中經(jīng)常遇到的功能，今天小編使用Element-UI 進(jìn)行實(shí)現(xiàn)在vue項(xiàng)目中實(shí)現(xiàn)面包屑功能，具體實(shí)現(xiàn)方式大家跟隨小編一起學(xué)習(xí)吧

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

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

最笨的方式

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

<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: "首頁(yè)",
     path: "/home"
    }, {
     name: "系統(tǒng)設(shè)置",
     path: "/setting"
    }, {
     name: "用戶管理",
     path: "/setting/usermanage"
    }]
  };
 }
};
</script>

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

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

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

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

不過(guò)還是有人會(huì)說(shuō)我就想安安靜靜寫(xiě)寫(xiě)代碼，其他的我不想。那也行，不過(guò)這樣寫(xiě)顯然不夠逼格。

利用路由元信息

上面的方法，非常的不夠逼格，顯然不是我們想要的，那我們?cè)賮?lái)看看第二種實(shí)現(xiàn)方式。

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

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

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

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

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

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

路由對(duì)象 matched 屬性

首先我們先來(lái)看看官方對(duì) matched 的介紹。

matched：返回一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄。

可以看到當(dāng)我們定義好路由結(jié)構(gòu)以后，我們就可以獲取到當(dāng)前頁(yè)面的路由記錄。

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

//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;
   //如果不是首頁(yè)
   if (!this.isHome(matched[0])) {
    matched = [{ path: "/home", meta: { title: "首頁(yè)" } }].concat(matched);
   }
   this.breadList = matched;
  }
 },
 created() {
  this.getBreadcrumb();
 }
};
</script>

創(chuàng)建完組件之后，在需要的地方注入即可。如果你的網(wǎng)頁(yè)結(jié)構(gòu)布局合理恰當(dāng)?shù)脑捴恍枰惶幰镁涂梢运芯W(wǎng)頁(yè)使用啦。

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

定義的路由信息如下：

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/home'
  },
  {
   path: '/home',
   name: 'home',
   component: Home,
   meta: { title: '首頁(yè)' }
  },
  {
   path: '/setting',
   name: "setting",
   component: () => import('./views/setting/Setting.vue'),
   redirect: '/setting/user',
   meta: { title: '系統(tǒng)設(shè)置' },
   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: '綜合實(shí)例' }
  }
 ]
});
export default router;

可以看到我們非常靈活的實(shí)現(xiàn)出我們需要的效果?？赡苓@個(gè)功能并沒(méi)有完善，比如有些頁(yè)面不需要怎么辦？

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

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

總結(jié)

以上所述是小編給大家介紹的Vue動(dòng)態(tài)面包屑功能的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: