多路径来源页面导航高亮以及面包屑导航修改

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 893 阅读时长 ≈ 1 分钟
业务方面对产品进行多维度的划分（或者对产品进行归档、打标签、收藏等，带来的前端导航高亮以及面包屑问题解决

问题缘由

这个问题比较普遍，原因是业务方面对产品进行多维度的划分（或者对产品进行归档、打标签、收藏等等），反应在前端方面就是同一个页面可以有不同的入口（产品目录结构划分）

干说不如举个例子：

  1. “活期储蓄”产品属于负债类理财产品（导航菜单）

  2. 关注“活期储蓄”产品

  3. 在“我的关注”菜单里也存在“活期储蓄”产品

从上面的描述中不难发现，“活期储蓄”产品既可以从“负债类理财产品”菜单进入，也可以从“我的关注”菜单进入。

这就带来了两个问题：

  1. 当进入“活期储蓄”产品详情页面的时候，高亮哪个导航菜单

  2. 当进入“活期储蓄”产品详情页面的时候，面包屑导航怎么显示

从用户角度来说自然是我从哪里点进去的就高亮哪个菜单，面包屑也真实的反应“来源路径”

技术背景

项目采用的技术： Vue，Element UI，vue-router

采用的 element ui 的 导航组件和面包屑组件。

面包屑是借助 vue-router 的 matched 方法 匹配到的路由对象数据注入ui组件实现的

解决问题

  • 如果可以从后端数据上进行处理当然更好，现实是没有如果。

  • 前端处理，分别针对导高亮和面包屑处理

思路分析

  1. 在进入详情页面的行为中增加标记（我使用 sessionStorage 标记，标记信息包括路径path、title，path用于高亮导航，title用于面包屑展示）

  2. 在离开详情页的时候移除标记（通过路由守卫实现，目的是标记不会带来别的副作用）

  3. 根据标记修正菜单高亮、面包屑展示

代码实现

分析完之后发现写代码就跟玩一样，没有什么技术含量，就不贴代码了

有一点需要注意：

在上面思路分析中，当进入详情页，刷新页面，可能会存在时序问题，具体就是面包屑组件里标记信息不能及时同步，这里我采用的是在data上面定义属性signTitle承接sessionStorage，然后在 computed 里面以signTitle为源数据得到最新的标记信息

可以使用全局状态管理方式替代sessionStorage，状态持久化就可以了

🌹 持续更文，关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉

🎁 欢迎大家评论交流, 蟹蟹😊