Vue中使用keep-alive缓存页面详解

利用keep-alive 缓存需要缓存的页面

在app.vue中改写router-view

<keep-alive> <router-view> <!-- 这里是会被缓存的视图组件，比如 page1,page2 --> </router-view> </keep-alive>

在router/index.js中添加路由元信息，设置需要缓存的页面

routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: true, //此组件需要被缓存 } }, { path: '/page1', name: 'page1', component: page1, meta: { keepAlive: true, //此组件需要被缓存 } }, { path: '/page2', name: 'page2', component: page2, meta: { keepAlive: true, // 此组件需要被缓存 } }, { path: '/page3', name: 'page3', component: page3, meta: { keepAlive: true, // 此组件需要被缓存 } } ]

钩子函数的执行顺序

不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数，做不同的事。务必理解上述钩子函数的执行时机和执行顺序，本教程的核心就依赖于此钩子函数
activated和deactivated是使用keep-alive后，vue中比较重要的两个钩子函数，建议详细了解下。

在组件中，主要是在activated钩子函数中判断是否使用缓存

activated() {
//使用缓存，直接跳过
if(不需要缓存，则执行相应逻辑){

}

},

文末 分享一些技术学习视频资料：https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw