vue2.0 keep-alive组件用法

在做vue移动端项目的时候，有些课程列表内容特别多，通过做上拉加载就可以分批加载，但是如果用户操作到四五页左右点进去看课程详情，返回会回到第一页数据。这样再次上拉加载找课程就比较麻烦。所有我们可以利用vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。定位用户当前操作的位置及数据。

一.根据实际需求，将keep-alive组件开关定到相应页面，通常都是在app.vue里面设置：

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

二.在路由配置router.js中设置需要缓存的页面路由：

const router = new Router({
	// mode: 'history', //开启H5 history历史记录，可以不用设置
	routes
});

router.beforeEach((to, from, next) => {
	/**
	*library 课程列表
	*detail 课程详情
	*to.meta.keepAlive true缓存 false不缓存
	**/
	if(to.name === 'main.library' && from.name === 'detail') {
		to.meta.keepAlive = true
	}	
	next()
});