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