【前端·momo的项目回顾】vue3二次封装el-tag作为导航HistoryList

前言：什么都2023年了，你还只会用面包屑？作为一个在校学子，如需进行系统的编写，大都会使用面包屑的方式作为页面的标志，但是如果都使用面包屑，那么编程的趣味就少了点。俗话说：“编程重要的是勤奋努力，更重要的是想象力！”那有啥好的方案了，且看文章！

需求分析

我：师妹，你能想到除了面包屑之外还有其他的导航组件吗？> 师妹：emm，我想想，好像还真想不出，还有其他吗？> 我：当然啦，你看俺们教务网不就是一种吗！你能模仿一下咩？> 师妹：当然！> 几天后，当然师妹是还没能做出来的，让本mo出马！

为啥使用面包屑？主要是因为其占用空间较小、对当前路径能够进行定位、对用户较为友好且更方便的是，很多UI组件库都对其进行了封装，方便开发者快速食用。但如前言所说的除了面包屑，我们还需要其他类似的组件用于这种导航场景。  如下图所示，这种导航效果对于展示而言同样方便定位、用户友好，比起面包屑而言，这个组件还多了一个历史记录的效果。

• 用户友好的类似tag的UI：可以看到，组件的相关样式与Tag相近，需要编写或引用类似的用户友好的效果
• 当前页面定位：本组件与面包屑类似，则一定要进行当前页面的定位和凸显相关样式
• 对历史信息的删除：从图中直接观察到，用户可以操作打开过的历史记录

技术选型

从需求分析知道，这次组件的实现需要对路由信息进行劫持，则需要选择的一项技术是vue-router。  样式是非常重要的，为了提升开发效率，我从项目的的UI组件库Element-Plus中选择el-tag进行二次封装。  操作路由历史，我们需要将路由历史进行备份。项目使用了Pinia作为状态库，对于备份问题，除