缓存组件keep-alive

前言:
被包含在keep-alive中的组件会多出两个生命周期函数：
activated: 在keep-alive组件激活时调用，进入被keep-alive包裹的组件时触发
deactivated:在keep-alive组件离开时都调用

使用方法:

1. 直接包裹要缓存的组件,或者在app.vue中包裹所有组件

	<keep-alive :include="home">
        <router-view />
     </keep-alive>

2. 通过判断路由中meta中的状态

router/index.js

 meta: {
      keepAlive: true
    },

app.vue

<template>
	<div>
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>   
		<router-view v-if="! $route.meta.keepAlive"></router-view>

	</div>
</template>

3.通过include和exclude来缓存部分页面,每个组件中得有一个name属性

include：字符串或正则表达式。只有名称匹配的组件才会被缓存
exclude：字符串或正则表达式。任何匹配的组件都不会缓存

app.vue

	<keep-alive :include="home">
        <router-view />
     </keep-alive>

Home.vue

name: "home",

 activated() {
    console.log("home 组件激活拉");
    }
  },
  deactivated() {
    console.log("home 组件销毁拉");
  },

要被缓存的没被缓存注，可以用一下的形式，进行缓存

条件：1、列表页不可使用懒加载延迟加载数据，2、列表页需要使用keepAlive缓存

beforeRouteLeave(to,from,next){  
//离开页面之前将高度存储到sessionStorage。
这里不建议用localStorage，因为session在关闭浏览器时会自动清除，
而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH',document.getElementById('demo').scrollTop)
    next()
},

activated(){   //在activated生命周期内，从sessionStorage中读取高度值并设置到dom
    if(sessionStorage.getItem('scrollH')){
        document.getElementById('demo').scrollTop=sessionStorage.getItem('scrollH')
    }
},
tip:给Home（其他组件）这个组件的div，定义id=“demo”