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>
复制代码

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

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

路由对象 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 不存在时面包屑数据置空，或者增长一个数据标示面包屑的现实隐藏。等等都是一种思路。小伙伴们不妨发挥本身的想象试试吧。

看十遍不如本身撸一遍。这样很快就能掌握知识点。最后上下效果图给你们观摩。

最后，若是以为文章不错，对你有所启发，点赞是一种态度也是一种承认。

微信公众号：六小登登，更多干货文章，这里有个人不少故事，欢迎一块儿交流。