这次给大家带来keep-alive在vue2中应该怎样使用，keep-alive在vue2中使用的注意事项有哪些，下面就是实战案例，一起来看一下。

keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。

基本使用如下：

登录后复制

一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页

有两个情况：

1. 直接点击浏览器的后退返回按钮。

2. 点击导航栏中的 /list的链接返回。

那么针对第一种情况下，我们直接通过后退按钮时，返回到列表页(/list) 是不需要请求数据。

针对第二种情况下，我们通过链接返回到列表页是需要请求数据。

所以这边有三种情况：

1. 默认进来列表页需要请求数据。

2. 进入详情页后，通过浏览器默认后退按钮返回，是不需要ajax的请求的。

3. 进入详情页后，通过点击链接返回到列表页后，也是需要发ajax请求的。

配置如下：

1. 入口文件 app.vue 的配置如下：

登录后复制

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 代码如下：

 
 
vue
 
{{msg}}
 跳转到detail页 
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();  } }) }};

登录后复制

4. detail.vue 代码如下：

 
 
{{msg}}
 返回列表页 
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);  }); } }};

登录后复制

二：使用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组件所有代码如下：

 
 
{{msg}}
 返回a页面 
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页面 }};

登录后复制

在 C 组件里面设置 beforeRouteLeave：

beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = false; // 让A不缓存，重新请求数据 console.log(to) next(); // 跳转到A页面}

登录后复制

c组件所有代码如下：

 
 
{{msg}}
 返回a页面 
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页面 }};

登录后复制

a组件内的所有的代码如下：

 
 
vue
 
{{msg}}
 跳转到b页面 跳转到c页面 
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();  } }) }};

登录后复制

注意 b组件到a组件不重新请求数据 (包括点击链接和浏览器后退按钮)，c组件到a组件请求数据(包括点击链接和浏览器后退按钮).

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

nodejs怎么实现gulp打包功能

webpack构建多页面应用的步骤分析

以上就是keep-alive在vue2中应该怎样使用的详细内容，更多请关注【创想鸟】其它相关文章！