这个问题比较普遍,原因是业务方面对产品进行多维度的划分(或者对产品进行归档、打标签、收藏等等),反应在前端方面就是同一个页面可以有不同的入口(产品目录结构划分)
干说不如举个例子:
从上面的描述中不难发现,“活期储蓄”产品既可以从“负债类理财产品”菜单进入,也可以从“我的关注”菜单进入。
这就带来了两个问题:
从用户角度来说自然是我从哪里点进去的就高亮哪个菜单,面包屑也真实的反应“来源路径”
项目采用的技术: Vue,Element UI,vue-router
采用的 element ui 的 导航组件和面包屑组件。
面包屑是借助 vue-router 的 matched 方法 匹配到的路由对象数据注入ui组件实现的
分析完之后发现写代码就跟玩一样,没有什么技术含量,就不贴代码了
有一点需要注意:
在上面思路分析中,当进入详情页,刷新页面,可能会存在时序问题,具体就是面包屑组件里标记信息不能及时同步,这里我采用的是在data
上面定义属性signTitle
承接sessionStorage
,然后在 computed
里面以signTitle
为源数据得到最新的标记信息
可以使用全局状态管理方式替代sessionStorage,状态持久化就可以了