公司项目的面包屑导航是使用 element 的面包屑组件，配合一份 json 配置文件来实现的，每次写新页面都需要去写 json 配置，非常麻烦，所以写一个面包屑cli，自动生成页面、自动配置面包屑数据，提高效率:rocket:
明确目标
提供 init 命令，在一个新项目中能够通过初始化生成面包屑相关文件
能够通过命令生成页面，并且自动配置面包屑 json 数据
按照项目原有需求，能够配置面包屑是否可点击跳转
按照项目原有需求，能够配置某路径下是否展示面包屑
支持仅配置而不生成文件，能够为已存在的页面生成配置
能够动态配置当前面包屑导航的数据
…… （后续在使用中发现问题并优化）
实现分成两部分
面包屑实现
cli 命令实现
面包屑实现
在路由前置守卫 beforEach 中根据当前路径在配置文件中匹配到相应的数据
把这些配置存到 vuex
在面包屑组件中根据 vuex 中的数据 v-for 循环渲染出面包屑
JSON 配置文件
json 配置文件是通过命令生成的，一个配置对象包含 name path clickable isShow 属性
[ { "name": "应用", // 面包屑名称（在命令交互中输入） "path": "/app", // 面包屑对应路径（根据文件自动生成） "clickable": true, // 是否可点击跳转 "isShow": true // 是否显示 }, { "name": "应用详情", "path": "/app/detail", "clickable": true, // 是否可点击跳转 "isShow": true // 是否显示 } ]
匹配配置文件中的数据
比如按照上面的配置文件，进入 /app/detail 时，将会匹配到如下数据
[ { "name": "应用", "path": "/app", "clickable": true, "isShow": true }， { "name": "应用", "path": "/app/detail", "clickable": true, "isShow": true } ]
动态面包屑实现
有时候需要动态修改面包屑数据（比如动态路由），由于数据是存在 vuex 中的，所以修改起来非常方便，只需在 vuex 相关文件中提供 mutation 即可，这些 mutation 在数据中寻找相应的项，并改掉
export const state = () => ({ breadcrumbData: [] }) export const mutations = { setBreadcrumb (state, breadcrumbData) { state.breadcrumbData = breadcrumbData }, setBreadcrumbByName (state, {oldName, newName}) { let curBreadcrumb = state.breadcrumbData.find(breadcrumb => breadcrumb.name === oldName) curBreadcrumb && (curBreadcrumb.name = newName) }, setBreadcrumbByPath (state, {path, name}) { let curBreadcrumb = state.breadcrumbData.find( breadcrumb => breadcrumb.path === path ) curBreadcrumb && (curBreadcrumb.name = name) } }
根据路径匹配相应配置数据具体代码
import breadcrumbs from '@/components/breadcrumb/breadcrumb.config.json' function path2Arr(path) { return path.split('https://www.jb51.net/').filter(p => p) } function matchBreadcrumbData (matchPath) { return path2Arr(matchPath) .map(path => { path = path.replace(/^:([^:?]+)(\?)?$/, (match, $1) => { return `_${$1}` }) return 'https://www.jb51.net/' + path }) .map((path, index, paths) => { // 第 0 个不需拼接 if (index) { let result = '' for (let i = 0; i <= index; i++) { result += paths[i] } return result } return path }) .map(path => { const item = breadcrumbs.find(bread => bread.path === path) if (item) { return item } return { name: path.split('https://www.jb51.net/').pop(), path, clickable: false, isShow: true } }) } export default ({ app, store }) => { app.router.beforeEach((to, from, next) => { const toPathArr = path2Arr(to.path) const toPathArrLength = toPathArr.length let matchPath = '' // 从 matched 中找出当前路径的路由配置 for (let match of to.matched) { const matchPathArr = path2Arr(match.path) if (matchPathArr.length === toPathArrLength) { matchPath = match.path break } } const breadcrumbData = matchBreadcrumbData(matchPath) store.commit('breadcrumb/setBreadcrumb', breadcrumbData) next() }) }
面包屑组件
面包屑组件中渲染匹配到的数据
<template> <div v-if="isBreadcrumbShow"> <el-breadcrumb separator="https://www.jb51.net/"> <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :to="item.clickable ? item.path : ''" :key="index"> {{ item.name }} </el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> import breadcrumbs from "./breadcrumb.config" export default { name: 'Breadcrumb', computed: { isBreadcrumbShow () { return this.curBreadcrumb && this.curBreadcrumb.isShow }, breadcrumbData () { return this.$store.state.breadcrumb.breadcrumbData }, curBreadcrumb () { return this.breadcrumbData[this.breadcrumbData.length - 1] } } } </script>
cli命令实现
cli命令开发用到的相关库如下：这些就不细说了，基本上看下 README 就知道怎么用了
目录结构