面包屑

场景

在我还没有接触element-UI、ant design vue这类UI组件库的时候，还不知道什么是 面包屑。很好奇为什么前端有这么个名词，后来知道原来面包屑常用的场景有后台管理系统、官网目录导航等地方，目的是为了帮用户知道当前所在的页面路径。

分析

用vue实现一个breadcrumb，必须要借助vue-router实现。其实我们的思路应该是这样子的：

• 在router.js的路由表中写好全部的前端路由；
• Scene1：在需要使用breadcrumb的页面中引入基础面包屑组件；
• Scene2：在全局布局的header处直接引入，页面不用单独引入；
• 根据当前浏览器URL匹配路由表中相应的路由信息；
• 路径变化时，breadcrumb生成相应的路径。

vue-router

由于我们的面包屑组件是根据 URL 变化的，而 URL 又是从路由表中得来的。因此我们需要做的是在每次进入页面时获取路由相关信息。先说一下两个常用路由相关属性：this.$route和this.$router。你知道他们的区别知道是什么吗？

• this.$route（路由信息对象）

• this.$router（路由实例）

实现

<!-- @description: 面包屑组件 -->
<template>
  <ul class="breadcrumb-wrapper">
    <li v-for="(item) in list" :key="item.path">
      <router-link :to="item.path">{{item.name}}</router-link>
    </li>
  </ul>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      list: [],
      isShake: false
    }
  },
  created () {
    this.getPath()
  },
  methods: {
    getPath () {
      const current = this.$router.currentRoute.matched
      for (const item of current) {
        const temp = {}
        temp.name = item.meta.title
        temp.path = item.path !== '' ? item.path : '/'
        this.list.push(temp)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.breadcrumb-wrapper
  display flex
  flex-wrap wrap
  height 60px
  line-height 60px
  li
    color #666
    font-size 15px
    &:not(:last-child) :after
      content '>'
      margin 0 10px
      color #ccc
      &:last-child
        font-weight bold
        color #000
a
  text-decoration none
a:visited
  color #666
a:hover
  color #1296db
</style>