Vue 缓存路由组件的生命周期钩子 activated和deactivated

目录

• Vue 缓存路由组件的生命周期钩子 activated和deactivated

 

Vue 缓存路由组件的生命周期钩子 activated和deactivated

activated和deactivated只能用于被keep-alive包裹的路由组件
在切换路由组件时，有的路由组件被keep-alive包裹时，创建和销毁相关的生命周期钩子会失效，这两个钩子就是为了解决这个问题的

<template>
  <h1>message by Island 
      {{id}} 
      -
      {{title}}
  </h1>
</template>
<script>
export default {
  props:['id','title'],
  name:'Island',
  created(){
    console.log('Isalnd 创建');
  },
  beforeDestroy(){
    console.log('Isalnd 即将被销毁');
  },
  activated(){
    console.log('Island 激活...');
  },
  deactivated(){
    console.log('Island 失活...');
  }
};
</script>