created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

activated,deactivated 这两个生命周期函数一定是要在使用了 keep-alive 组件后才会有的,否则则不存在。

当引入 keep-alive 的时候,页面第一次进入

钩子的触发顺序 created-> mounted -> activated,退出时触发deactivated。

当再次进入(前进或者后退)时,只触发 activated

注意:keep-alive里面紧跟包裹 router-view 组件,而不能出现其他标签,不然会导致无法缓存页面

vue缓存页面得几种方式

1、全部缓存

<keep-alive>
   <router-view></router-view>
</keep-alive>

2、缓存单个指定路由

//可用v-bind,相当于父子组件
<keep-alive include="该路由的name名称">
   <router-view></router-view>
</keep-alive>

3、缓存多个指定路由

<router-view v-if="!$route.meta.keepAlive"></router-view>
{
    path:'/test',
    name:'Test',
    component: Test,
    meta: {keepAlive: true} //true缓存 false不缓存
}