vue缓存页面之keepAlive的使用

要实现的功能是，在列表进入详情页后，返回列表页时，列表页不刷新，但是从其他导航页面进入列表页要刷新。
1、第一步：在app.vue使用keepalive

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

2、第二步：在路由meta中设置keepAlive，这里为什么设置isBack后面会说

3、第三步：在需要缓存的页面加入下面的代码，事实上，当我们加入keep-alive标签后，meta中keepAlive为true的路由页面数据会在首次访问后将数据缓存到本地的sessionStorage中，我们可以通过加入isBack来判断是否请求新的数据。

       beforeRouteEnter(to, from, next) {
			if (from.name == 'travelnotesdetail') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			if (this.$route.meta.isBack) {
				// 如果isBack是true，表明不需要获取新数据，直接使用缓存的数据    
				let formDataStorage = JSON.parse(sessionStorage.getItem('notes'));
				this.notes = formDataStorage;
				this.$route.meta.isBack = false;
			}else{
				this.getNotes();
				
			}
		},
		methods:{

beforeRouteEnter会在页面跳转之前执行。

值得注意的是

正常页面的生命周期： beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive后
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter -->activated --> deactivated

也就是说，使用keep-alive后会多出一个activated ，当页面被缓存时，这个东西非常有用。比如，在详情页中发表了评论，有这个东西，就能在返回列表时通过activated 调用评论列表而不会影响整个页面缓存