美文网首页
vue页面缓存设置,动态设置页面缓存

vue页面缓存设置,动态设置页面缓存

作者: easy_mark | 来源:发表于2019-03-22 17:07 被阅读0次

    情景:A页面—>B页面—>C页面,A页面去B页面期望B页面不缓存,B页面去C页面时,期望B页面可以被缓存。(实际场景可以是:A为首页,B为列表页,C为详情页,B滚动翻页后,从C返回B,记录滚动位置。)
    通过路由访问钩子设置B页面的keepAlive为true或者false。
    离开路由后,判断to.name是否是A的路由名,是的话设置为false,否则设置为true。注意B页面的keepAlive要设置为true。

    
        beforeRouteLeave (to,from,next){
          if(to.name==='index'){
            from.meta.keepAlive = false
          }else{
            from.meta.keepAlive = true
          }
          next()
        },
    

    2.通过vuex结合路由的includes功能以及路由钩子函数实现。(推荐,实现起来优雅)
    3.声明一个初始化页面状态,内部变量的函数,从a 页面进入执行初始化函数,其余情况不执行。视图依赖数据驱动,所以可以实现效果。

    相关文章

      网友评论

          本文标题:vue页面缓存设置,动态设置页面缓存

          本文链接:https://www.haomeiwen.com/subject/htprvqtx.html