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

前情提要 : 面包屑指的是这个,而不是那种标签页

主要功能描述

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

源码地址在文末,欢迎star哦

实现要点

• 在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>)

  注意:刷新页面需要先将页面从keepAlive中移除,不然又会进入activated周期

• 路由识别(在全局路由守卫中处理)

  注意:若使用$router.push({params})传参,面包屑回退或浏览器回退时,$route.params的值为{}

  • 若当前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存不太好吧,页面间就有影响了…

纠结…

-------------源码地址------------------

github: https://github.com/oyai32/vuebase
(不要忘记star哦~)