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>

如果按照上述方式去实行的话，虽然我们可以完成面包屑的功能，但是它不够灵活，在每个需要的页面添加，带来的维护成本是巨大的。

最主要的是你们的产品天天变需要咋办，还不累死。有人说登哥我就喜欢这么改，只有这样我才会有工作量。

好吧那当我没说，但是我劝你善良，登哥劝你一句，把那些大量重复的工作尽可能的赶紧做完，剩下的时间你才能自由安排，进行充能呀。

否则，你拿什么进步？普通的人总是喜欢抱怨没有时间，而优秀的人就是这么把时间省下来的。他们知道什么事情重要，什么事情不重要。

不过还是有人会说我就想安安静静写写代码，其他的我不想。那也行，不过这样写显然不够逼格。

利用 路由元信息

上面的方法，非常的不够逼格，显然不是我们想要的，那我们再来看看第二种实现方式。

我们可以把路径结构配置在 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>

这样也能实现我要想的效果，但是这个还是显得比较冗余，路由数据已经定义好一次结构，还要加上一个专门的面包屑数据，造成代码的重复，还是不够逼格。

那接下来登哥教你一招比较有逼格的。准备好小本本记下来。