面包屑如何结合keepAlive实现页面缓存

主要功能描述

从一级页面跳转至其子页面,需在面包屑上加一层
- 如: 列表页跳转详情页
点击面包屑回退或点击浏览器的回退,可使页面回到上一层
- 回到原来的样子(不刷新)
再次从一级页面跳转至子页面,若参数一致,则走缓存,若参数不一致,则刷新
- 场景1:从列表页进入A,请求A的数据,回到列表页后,再进入A,走缓存
- 场景2:从列表页进入A,请求A的数据,回到列表页后,进入B,请求B的数据
从菜单列表点击进入,一定重新请求
- 相当于重新进入这个页面,还是刷新得好
支持$router的params传参
附加功能: 刷新页面仍留在当前页

实现要点

在routes中,给每个路由打上是否为子页面的标记
- 如:meta:{type:'sub'}则表示它不是菜单页
- 当然菜单页也可以被当作是子页面跳转,需要在面包屑上做额外的处理
将当前面包屑的数据用数组存在vuex里
- session中也存一份,方便刷新时从session里拿来再放vuex中
- 若前往菜单页,则面包屑里只保留当前层级
  - 如:原来面包屑里是[{name:'A'}],若访问的是B菜单,则直接改成[{name:'B'}]
- 若前往子页面,则在面包屑数组中新增一个
  - 如:原来面包屑里是[{name:'A'}],若访问的是其子页面A1,则追加成[{name:'A'},{name:'A1'}]
- 若从子页面回到上一层,则在面包屑数组中删除多余的数据
  - 如:原来面包屑里是[{name:'A'},{name:'A1'},{name:'A11'}],若回到A1,则变成[{name:'A'},{name:'A1'}]
使用keepAlive实现页面的缓存
- 在每个页面created的时候,将页面加入keepAlive,并将其参数保存
- 第二次访问相同页面时,则会进入其activated生命周期
- 在activated中拿当前请求参数和之前保存的参数比较
- 若相同则不做处理,继续走缓存
- 若不同,则需要刷新页面(重新渲染<router-view>)
路由识别(在全局路由守卫中处理)
- 若当前to的页面的params为{}时,需要判断是回退还是参数原本就为空
- 若是回退,且之前有参数,则需要把参数带进路由里,否则页面上通过$route获取不到
  - 怎么拿到之前的参数?
  - 可以用当前路由的name到面包屑数据中找.若找不到或面包屑里的参数也是{}那无所谓,继续执行
  - 拿到参数后,怎么带进路由里?
  - 重新$router.push({params})不行,因跳转相同,不会再重新执行路由跳转
  - 直接路由守卫时,在next({name,params})里带上,相当于重新走了一次路由
菜单跳转处理
- 由于从菜单列表点击进入,一定要刷新页,所以直接在点击事件上做处理
- 点击后直接删除该页面的keepAlive,并刷新页面 (重新渲染<router-view>)
刷新页面时的处理
- 刷新页面时,先将session中的面包屑数据存到vuex中
  - 我是写的vuex插件,初始store时存
- 路由处理时,可以从面包屑中获取页面原来的参数,并正常获取页面数据
- 面包屑数据中第一个节点的值,即为菜单的默认值
  - 因为面包屑的第一个节点存的是菜单页,之后的都是该菜单页的子页面的数据

思考题

若将子页面的地址(之前是通过$router.push({params})传的参),直接复制到浏览器的另一个窗口中打开,怎么办?

我现在只能通过在路由守卫中判断: 该页面是否为子页面,且当前是否含有面包屑,来判断这种场景. 如果符合条件则跳转到首页.
但要是之前该窗口就有面包屑了,就判断不了了.目前这个问题,我还没法解决.求广大网友支招.
- 场景描述:
- 浏览器窗口中已打开过A页面,即面包屑中的值为[{name:'A'}]
- 此时,将该窗口的地址手动改为非A页面下的子页面的地址,如:手动将地址栏改为B1
- 这种情况,我就没办法拿到B1原来的参数了,进来的话会由于缺参报错.
- 要怎么识别到这种情况,并将其指向首页了?

其实就是router.push({params})传参后,刷新的问题,我又不想在地址栏看到参数.本窗口可以用seesion解决,跨窗口用local?

面包屑用local存不太好吧,页面间就有影响了..

纠结.....