多路径来源页面导航高亮以及面包屑导航修改
问题缘由
这个问题比较普遍,原因是业务方面对产品进行多维度的划分(或者对产品进行归档、打标签、收藏等等),反应在前端方面就是同一个页面可以有不同的入口(产品目录结构划分)
干说不如举个例子:
-
“活期储蓄”产品属于负债类理财产品(导航菜单)
-
关注“活期储蓄”产品
-
在“我的关注”菜单里也存在“活期储蓄”产品
从上面的描述中不难发现,“活期储蓄”产品既可以从“负债类理财产品”菜单进入,也可以从“我的关注”菜单进入。
这就带来了两个问题:
-
当进入“活期储蓄”产品详情页面的时候,高亮哪个导航菜单
-
当进入“活期储蓄”产品详情页面的时候,面包屑导航怎么显示
从用户角度来说自然是我从哪里点进去的就高亮哪个菜单,面包屑也真实的反应“来源路径”
技术背景
项目采用的技术: Vue,Element UI,vue-router
采用的 element ui 的 导航组件和面包屑组件。
面包屑是借助 vue-router 的 matched 方法 匹配到的路由对象数据注入ui组件实现的
解决问题
-
如果可以从后端数据上进行处理当然更好,现实是没有如果。
-
前端处理,分别针对导高亮和面包屑处理
思路分析
-
在进入详情页面的行为中增加标记(我使用 sessionStorage 标记,标记信息包括路径path、title,path用于高亮导航,title用于面包屑展示)
-
在离开详情页的时候移除标记(通过路由守卫实现,目的是标记不会带来别的副作用)
-
根据标记修正菜单高亮、面包屑展示
代码实现
分析完之后发现写代码就跟玩一样,没有什么技术含量,就不贴代码了
有一点需要注意:
在上面思路分析中,当进入详情页,刷新页面,可能会存在时序问题,具体就是面包屑组件里标记信息不能及时同步,这里我采用的是在data
上面定义属性signTitle
承接sessionStorage
,然后在 computed
里面以signTitle
为源数据得到最新的标记信息
可以使用全局状态管理方式替代sessionStorage,状态持久化就可以了
🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉
🎁 欢迎大家评论交流, 蟹蟹😊
本文来自博客园,作者:甜点cc,转载请注明原文链接:https://www.cnblogs.com/all-smile/p/16625364.html