keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。
基本使用如下：
<keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive>
一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页
有两个情况：
1. 直接点击浏览器的后退返回按钮。
2. 点击导航栏中的 /list的链接返回。
那么针对第一种情况下，我们直接通过后退按钮时，返回到列表页(/list) 是不需要请求数据。
针对第二种情况下，我们通过链接返回到列表页是需要请求数据。
所以这边有三种情况：
1. 默认进来列表页需要请求数据。
2. 进入详情页后，通过浏览器默认后退按钮返回，是不需要ajax的请求的。
3. 进入详情页后，通过点击链接返回到列表页后，也是需要发ajax请求的。
配置如下：
1. 入口文件 app.vue 的配置如下：
<!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
2. 在router中设置meta属性，设置 keepAlive: true 表示需要使用缓存，false的话表示不需要使用缓存。且添加滚动行为 scrollBehavior
router/index.js 的配置如下：
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // 访问路径不带井号 需要使用 history模式，才能使用 scrollBehavior
base: '/page/app', // 配置单页应用的基路径
routes: [
{
path: '/',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懒加载
meta: {
keepAlive: true // true 表示需要使用缓存
}
},
{
path: '/list',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懒加载
meta: {
keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
}
},
{
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
}
],
scrollBehavior (to, from, savedPosition) {
// 保存到 meta 中，备用
to.meta.savedPosition = savedPosition;
if (savedPosition) {
return { x: 0, y: 0 };
}
return {};
}
});
export default router;
3. list.vue 代码如下：