怎么在Vue中實現一個動態面包屑功能

今天就跟大家聊聊有關怎么在Vue中實現一個動態面包屑功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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

<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>

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

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

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

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

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

利用 路由元信息

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

我們可以把路徑結構配置在 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：返回一個數組，包含當前路由的所有嵌套路徑片段的路由記錄 。

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

首先我們先創建一個面包屑的組件。

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

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

看完上述內容，你們對怎么在Vue中實現一個動態面包屑功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。