keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。
keep-alive生命周期
生命周期执行顺序：
1、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
3、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated
被keep-alive包裹住的页面都会被缓存，如果想刷新部分内容要启用activated函数，用法同created，activated只有在被keep-alive包裹时会触发，activated函数一进入页面就触发
在app.vue中写入
<keep-alive>
<router-view />
</keep-alive>
vue 路由跳转记住滚动位置，返回时回到上次滚动位置
mounted(){
window.addEventListener('scroll', this.handleScroll);
},
activated() {
if (this.scroll > 0) {
window.scrollTo(0, this.scroll);
this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
},
deactivated() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
this.scroll = document.documentElement && document.documentElement.scrollTop
}
希望可以帮到一些刚入门的萌新
