共计 889 个字符，预计需要花费 3 分钟才能阅读完成。
问题原因
这个问题比拟广泛，起因是业务方面对产品进行多维度的划分（或者对产品进行归档、打标签、珍藏等等），反馈在前端方面就是同一个页面能够有不同的入口（产品目录构造划分）
干说不如举个例子：
- “活期储蓄”产品属于负债类理财产品（导航菜单）
- 关注“活期储蓄”产品
- 在“我的关注”菜单里也存在“活期储蓄”产品
从下面的形容中不难发现，“活期储蓄”产品既能够从“负债类理财产品”菜单进入，也能够从“我的关注”菜单进入。
这就带来了两个问题：
- 当进入“活期储蓄”产品详情页面的时候，高亮哪个导航菜单
- 当进入“活期储蓄”产品详情页面的时候，面包屑导航怎么显示
从用户角度来说天然是我从哪里点进去的就高亮哪个菜单，面包屑也实在的反馈“起源门路”
技术背景
我的项目采纳的技术：Vue，Element UI，vue-router
采纳的 element ui 的 导航组件和面包屑组件。
面包屑是借助 vue-router 的 matched 办法 匹配到的路由对象数据注入 ui 组件实现的
解决问题
- 如果能够从后端数据上进行解决当然更好，事实是没有如果。
- 前端解决，别离针对导高亮和面包屑解决
思路剖析
- 在进入详情页面的行为中减少标记（我应用 sessionStorage 标记，标记信息包含门路 path、title，path 用于高亮导航，title 用于面包屑展现）
- 在来到详情页的时候移除标记（通过路由守卫实现，目标是标记不会带来别的副作用）
- 依据标记修改菜单高亮、面包屑展现
代码实现
剖析完之后发现写代码就跟玩一样，没有什么技术含量，就不贴代码了
有一点须要留神：
在下面思路剖析中，当进入详情页，刷新页面，可能会存在时序问题，具体就是面包屑组件里标记信息不能及时同步，这里我采纳的是在 data 下面定义属性 signTitle 承接 sessionStorage，而后在 computed 外面以signTitle 为源数据失去最新的标记信息
能够应用全局状态治理形式代替 sessionStorage，状态长久化就能够了
🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。
🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉
🎁 欢送大家评论交换, 蟹蟹😊
正文完