乐趣区

关于前端:多路径来源页面导航高亮以及面包屑导航修改

问题原因

这个问题比拟广泛,起因是业务方面对产品进行多维度的划分(或者对产品进行归档、打标签、珍藏等等),反馈在前端方面就是同一个页面能够有不同的入口(产品目录构造划分)

干说不如举个例子:

  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,状态长久化就能够了


🌹 继续更文,关注我,你会发现一个虚浮致力的宝藏前端😊,让咱们一起学习,独特成长吧。

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

🎁 欢送大家评论交换, 蟹蟹😊

退出移动版