vue keep-alive作用及用法

vue keep-alive

作用：
  vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
  keep-alive是用在一个直属子组件被开关的情形，同时只有一个子组件在渲染，若有v-for则不会工作
  注：keep-alive是一个抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中

// 页面文件
 
     
 


// 路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

属性：
  include： 字符串或正则表达式，只有名称匹配的组件会被缓存
  exclude： 字符串或正则表达式，名称匹配的组件不会被缓存》
  max：  数字，最多可以缓存多少组件实例

生命周期：
  activated和deactivated会在keep-alive树内所有嵌套的组件中触发
  如：B页面是缓存页面
    当A页面跳到B页面时，B页面的生命周期：activated（可在此时更新数据）
    B页面跳出时，触发deactivated
    B页面自身刷新时，会触发created-mouted-activated

question:
  首页A页面
  B页面跳转A页面，A页面需要缓存
  C页面跳转A页面，A页面不需要缓存

// A路由：
{
  path:'/',
  name:'A',
  component:A,
  meta:{
    keepAlive:true
  }
}

export default{
  data(){
    return {};
  },
 methods:{},
 beforeRouteLeave(to,from,next){
   to.meta.keepAlive = true;    // B跳转到A时，让A缓存，即不刷新
   next()
 }
}

export default{
  data(){
    return {};
  },
 methods:{},
 beforeRouteLeave(to,from,next){
   to.meta.keepAlive = false;    // C跳转到A让A不缓存，即刷新
   next()
 }
}