vue缓存页面(keepAlive,beforeRouterEnter)

需求

从列表页面进入详情页,返回列表页,列表页的数据不刷新,存在缓存中

设置路由

routes:[
  {
     path: '/list',
     name:'list',
     component: list,
     meta: {
       keepAlive: true,  // 是否缓存标志
       title:'列表页'
     }
   },
   {
     path: '/detail',
     name:'detail',
     component: detail,
     meta:{
     	title:'详情页'
     }
   },
]

页面路由嵌套设置

 <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

页面缓存数据处理

// 在进入页面时先判断是否是从详情页面返回
beforeRouterEnter (to, from, next) {
  if(from.path === '/detail') {
    to.meta.isBack = true
  }
  next()
},
activated () {
  // 如果不是从详情页面返回,则重新加载数据
  if (!this.$route.meta.isBack) {
    //加载页面数据
  }
  // 从新设置页面得路由元信息
  this.$route.meta.isBack = false
}

1.使用keep-alive进行页面缓存时会生成两个生命周期:actived,deactived
2.created:在创建vue对象时,zaihtml标签渲染之前就触发,但是只触发一次
3.mounted:是在挂载vue实例之后,钩子在挂载时执行一次,若页面没有缓存,返回页面还会再执行一次,若页面有缓存的话,返回页面时不再执行
4.actived:是组件被激活后的钩子函数,每次返回页面都会执行

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值