KeepAlive保活

APP.vue
//创建三个子页面，第一个写四个input的check勾选框，然后其他两页面也搞几个勾选
//只做contact页面的保活
<template>
    <div>
        <div>
            <router-link to="/">Hone</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/contact">Contact</router-link>
        </div>
        //组件被路由切换之后，会自动销毁，来节省内存
        //keep-alive:在此标签中的组件，将不会销毁
        //展示meta里有keepALive的组件
        <keep-alive v-if="$route.meta.keepAlive">
            <router-view />
        </keep-alive>
        //展示meta里没有keepALive的组件
        <router-view v-if"!$route.meta.keepAlive" />
    </div>
</template>
<script>
import MyCom from './components/MyCom.vue'
   export default{
      components:{MyCom}
      data(){
        
      },
      methods:{
         
      }
   }
</script>

index.js路由
//keep-alive的区别对待
//放在keep-alive中的组件，路由切换时不会被销毁，需要浪费额外的内存
//实际项目中，一个项目有很多页面，并非都要保持活动
const routes=[
    {
        path:'/contact',
        name:'Contact',
        //自定义数据：元数据
        meta:{
            //属性名随便起
            keepAlive:true        
        }
        component:()=>import('../views/Contact.vue')    
    }，
     {
        path:'/about',
        name:'About',
        component:()=>import('../views/About.vue')    
    }，
     {
        path:'/home',
        name:'Home',               
        component:()=>import('../views/Home.vue')    
    }            
]

保活组件的生命周期
//比喻：组件->怀孕->出生->更新->死了
//开始创建->创建完毕->开始挂载->挂载完毕->开始更新->更新完毕->开始销毁->销毁完毕
//如果组件被keep-alive保活了，则具有两个新的周期
deactivated(){
   console.log('deactivated:非激活') 
}，
activated(){
    //active：激活
    //保持活动，不会销毁，而是激活与不激活
    console.log('activated:激活')
    //希望页面显示时，立刻刷新，就用这个，例如购物车勾选好物品后切走再回来还保持勾选
}
点到Contact激活
点到Home和About非激活