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不缓存 }