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:是组件被激活后的钩子函数，每次返回页面都会执行