前言

改变从行动开始。之前写了vue-cl4 项目的搭建已经遇到的问题。今天带来我们项目中常用的的功能，动态面包屑。

路由配置

一个项目要想动态的生成面包屑，他的路由配置的一定要合理。不然面包屑就会错乱。下面是我简单配置的。路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'

//解决路由跳转的时候两次push的path地址相同 报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

  const routes = [
    {path:'/',redirect:'login',meta:{verify:false}},
    {path:'/login',name:'login',component:()=>import('views/login'),meta:{verify:false}},
    {path:'/dashboard',redirect:'homePage',meta:{verify:false}},//此路由是为了给动态面包屑作为首页 避免重复路由报错
    {path:'/home',name:'Home',component:()=>import('views'),meta:{title:'系统配置'},redirect:'/homePage',
      children:[
        {path:'/homePage',name:'HomePage',component:()=>import('views/home/homePage'),meta:{title:'首页',verify:false}},
        {path:'/pay',name:'Pay',component:()=>import('views/home/pay'),meta:{title:'支付管理',verify:false}},
      ]
    },
]

const router = new VueRouter({
  mode:'hash',
  fallback:true,
  routes
})

export default router

复制粘贴的话注意是否有login页面，没有的话可以将/ 和/login路由去掉，避免报错。

breadcrumb组件

创建breadcrumb动态面包屑组件 transition-group为我自定义的路由变化时的动画，去掉即可。效果图

<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </transition-group> 
  </el-breadcrumb>
</template>

<script>
// 原理：通过监听当前路由的变化，动态更新面包屑的内容。
export default {
  name:'Breadcrumb',
  data(){
    return{
        levelList:[]
    }
  },
  created(){
    this.getBreadcrumb()
  },

  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb(){
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
        const first = matched[0];
        if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
             matched = [{ path: '/dashboard',meta: { title: '首页' }}].concat(matched)
        }
        this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
  }
}
</script>

<style lang='scss' scoped>
.app-breadcrumb.el-breadcrumb {
  font-size: 14px;

  .no-redirect {
    // color: #97a8be;
    color: #000;
    cursor: text;
    font-weight:900;
  }
}
.el-breadcrumb__inner a{
    color: #97a8be !important;
    font-weight:100;
  }

</style>

结束语

改变从心动开始，动态面包屑组件封装就大体这个样，当然项目具体使用中还需做其他优化处理，如过场动画，权限处理，以及路由拦截等等。这里我就简单的处理了下。此项目开源链接。后续会给大家带来http封装，路由拦截，以及项目多环境配置，公共配置，打包成app等处理。希望对大家有所帮助。