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 代码如下：
<template> <p class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/detail">跳转到detail页</router-link> </p> </template> <script> export default { name: 'helloworld', data () { return { msg: 'welcome to your vue.js app' }; }, methods: { ajaxrequest() { const obj = { 'aa': 1 }; promise.all([this.$store.dispatch('testurl', obj)]).then((res) => { console.log(res); }); } }, beforerouteenter(to, from, next) { next(vm => { /* 如果 to.meta.savedposition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据 如果savedposition === null, 那么说明是点击了导航链接; 此时需要刷新数据，获取新的列表内容。 否则的话 什么都不做，直接使用 keep-alive中的缓存 */ if (to.meta.savedposition === undefined) { vm.ajaxrequest(); } if (to.meta.savedposition === null) { vm.ajaxrequest(); } }) } }; </script>
4. detail.vue 代码如下：
<template> <p class="list"> <h1>{{msg}}</h1> <router-link to="/list">返回列表页</router-link> </p> </template> <script> export default { name: 'list', data () { return { msg: 'welcome to your vue.js app' }; }, created() { this.ajaxrequest(); }, methods: { ajaxrequest() { const obj = { 'aa': 1 }; promise.all([this.$store.dispatch('withdary', obj)]).then((res) => { console.log(res); }); } } }; </script>
二：使用router.meta 扩展
假设现在有3个页面，需求如下：
1. 默认有a页面，a页面进来需要一个请求。
2. b页面跳转到a页面，a页面不需要重新请求。
3. c页面跳转到a页面，a页面需要重新请求。
实现方式如下：
在 a 路由里面设置 meta 属性：
{ path: '/a', name: 'a', component: resolve => require(['@/views/a'], resolve), meta: { keepalive: true // true 表示需要使用缓存 } }
所以router/index下的所有代码变为如下：
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) // 使用懒加载 }, { path: '/a', name: 'a', component: resolve => require(['@/views/a'], resolve), meta: { keepalive: true // true 表示需要使用缓存 } }, { path: '/b', name: 'b', component: resolve => require(['@/views/b'], resolve) }, { path: '/c', name: 'c', component: resolve => require(['@/views/c'], resolve) } ], scrollbehavior (to, from, savedposition) { // 保存到 meta 中，备用 to.meta.savedposition = savedposition; if (savedposition) { return { x: 0, y: 0 }; } return {}; } }); export default router;
在 b 组件里面设置 beforerouteleave
beforerouteleave(to, from, next) { // 设置下一个路由meta to.meta.keepalive = true; // 让a缓存，不请求数据 next(); // 跳转到a页面 }
b组件所有代码如下：
<template> <p class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </p> </template> <script> export default { name: 'list', data () { return { msg: 'welcome to b page' }; }, created() {}, methods: { }, beforerouteleave(to, from, next) { // 设置下一个路由meta to.meta.keepalive = true; // 让a缓存，不请求数据 next(); // 跳转到a页面 } }; </script>
在 c 组件里面设置 beforerouteleave：
beforerouteleave(to, from, next) { // 设置下一个路由meta to.meta.keepalive = false; // 让a不缓存，重新请求数据 console.log(to) next(); // 跳转到a页面 }
c组件所有代码如下：
<template> <p class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </p> </template> <script> export default { name: 'list', data () { return { msg: 'welcome to b page' }; }, created() {}, methods: { }, beforerouteleave(to, from, next) { // 设置下一个路由meta to.meta.keepalive = false; // 让a不缓存，重新请求数据 console.log(to) next(); // 跳转到a页面 } }; </script>
a组件内的所有的代码如下：
<template> <p class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/b">跳转到b页面</router-link> <router-link to="/c">跳转到c页面</router-link> </p> </template> <script> export default { name: 'helloworld', data () { return { msg: 'welcome to a page' }; }, methods: { ajaxrequest() { const obj = { 'aa': 1 }; promise.all([this.$store.dispatch('testurl', obj)]).then((res) => {}); } }, beforerouteenter(to, from, next) { next(vm => { /* 如果 to.meta.savedposition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据 如果to.meta.keepalive === false, 那么说明是需要请求的; 此时需要刷新数据，获取新的列表内容。 否则的话 什么都不做，直接使用 keep-alive中的缓存 */ if (to.meta.savedposition === undefined) { vm.ajaxrequest(); } if (!to.meta.keepalive) { vm.ajaxrequest(); } }) } }; </script>
注意 b组件到a组件不重新请求数据 (包括点击链接和浏览器后退按钮)，c组件到a组件请求数据(包括点击链接和浏览器后退按钮).
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
nodejs怎么实现gulp打包功能
webpack构建多页面应用的步骤分析
以上就是keep-alive在vue2中应该怎样使用的详细内容。