甜点cc

V1

2022/08/25阅读:19主题:蔷薇紫

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

问题缘由

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

干说不如举个例子:

  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,状态持久化就可以了


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

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

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

分类:

前端

标签:

前端

作者介绍

甜点cc
V1