前言

在网站中我们经常看到有个导航路径，可以直观地显示当前页面的路径，并快速返回之前的任意页面。这是一个非常实用的功能，也是在Web前端必备的导航UI之一。今天我们借助el-breadcrumb来快速实现一下面包屑导航路径，el-breadcrumb是Element-ui提供的一个面包屑组件，可以帮助我们快速的实现面包屑导航路径功能。

定义路由

在routes 配置中，每个路由对象都是一条路由记录，而且路由记录可以是嵌套的，因此当一个路由匹配成功后，他可能匹配多个路由记录，为了进一步确认我们的路由记录，我们可以通过遍历$route.matched来检查路由记录中的 meta 字段，通过定义meta标签来标示该路由指向的内容及权限等问题。

{
 path: '/dashboard',
 name: 'dashboard',
 component: () => import('@/views/test'),
 meta: { title: 'Dashboard', icon: 'dashboard',role: ['admin','vip'] },
 children: [{
 path: 'test',
 name: 'test',
 component: () => import('@/views/layout/index'),
 meta: { title: 'Test', icon: 'test' ,role: ['admin','vip']}
 }]
}

HTML构建

在el-breadcrumb中通过el-breadcrumb-item标签来表示路由中的每一级，并提供了一个separator属性用来设置分隔符，它只能是字符串，默认为斜杠/。这里我在el-breadcrumb-item中添加了span标签和a标签，当路径为最后一层时则用span标签显示，不支持点击路由跳转，否则用a标签定义，可以实现快速返回路径导航中的任意页面。

<template>
 <el-breadcrumb separator="/">
 <transition-group name="breadcrumb">
 <el-breadcrumb-item v-for="(item,index) in breadList" :key="item.path">
 <span v-if="index==breadList.length-1" class="noCursor">{{ item.meta.title }}</span>
 <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
 </el-breadcrumb-item>
 </transition-group>
 </el-breadcrumb>
</template>

CSS样式

transition-group的作用为路由切换时添加动画效果，transform: translateX(20px)用来定义路由变形的效果。translateX为水平方向移动（X轴移动），基点是元素中心点，translateX(20px)即中心向右移动20像素。transition则是用来过渡效果的，这里主要定义了进入、进出的效果。

<style lang="scss" scoped>
.breadcrumb-enter-active,
.breadcrumb-leave-active {
 transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
 opacity: 0;
 transform: translateX(20px);
}
.breadcrumb-leave-active {
 position: absolute;
}
.el-breadcrumb {
 display: inline-block;
 font-size: 14px;
 line-height: 50px;
 .noCursor{
 color: #97a8be;
 cursor: text;
 }
}
</style>

获取breadList

布局和样式准备好了之后我们开始实现功能，为了让Breadcrumb与 route同步，我们需要通过watch来监听$route的值，通过$route.matched 得到面包屑的标题的数组，通过filter筛选一下数组中存在meta和meta.title的对象。

data(){
 return{
 breadList: null
 }
},
watch: {
 $route() {
 this.getBreadcrumb()
 }
},
methods:{
 getBreadcrumb() {
 let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
 this.breadList = matched
 }
}

检测首页是否存在

这时我们获取到的是当前路由提取出的面包屑标题数组，但是这个数组中可能缺少了首页，所以我们需要对数组中的第一个对象进行判断，如果没有首页的话我们就为其路由中追加上首页，如果存在则直接赋给breadList呈现。concat() 方法用于连接两个数组，该方法不会改变现有的数组而是返回一个新数组。

methods:{
 getBreadcrumb() {
 let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
 const first = matched[0] && matched[0].name
 if(!(first.toLocaleLowerCase() === 'Home'.toLocaleLowerCase())){
 matched = [{ path: '/', meta: { title: 'Home' }}].concat(matched)
 }
 this.breadList = matched
 }
}

handleLink事件处理

这是用来快速返回之前的任意页面，由于路由中经常包含参数，所以这里我们需要对路由进行处理一下，这里我们可以利用path-to-regexp插件，这是一个url 的正则表达式能够很方便得从路由中提取我们想要的数据，path-to-regexp直接npm安装即可。compile() 方法用于在脚本执行过程中编译正则表达式，可以快速填充 url字符串的参数值。

import pathToRegexp from 'path-to-regexp'
handleLink(item) {
 const { params } = this.$route
 const { path } = item
 var PathRule = pathToRegexp.compile(path)
 this.$router.push(PathRule(params))
},

路由重定向

这里我们还需要考虑下路由中是否存在重定向问题，所以我们还需要完善下handleLink事件，这里我们添加一个条判断，如果路由中存在redirect的话我们就将路由跳转至重定向路由，如果没有则直接返回对应的路由即可。

handleLink(item) {
 const { params } = this.$route
 const { redirect, path } = item
 var PathRule = pathToRegexp.compile(path)
 if (redirect) {
 this.$router.push(redirect)
 return
 }
 this.$router.push(PathRule(params))
},

欢迎关注本人的公众号：编程手札，文章也会在公众号更新