vue2中的keep

vue2中的keep

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;

http://

3. list.vue 代码如下：

跳转到detail页

4. detail.vue 代码如下：

返回列表页

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

返回a页面

在 C 组件里面设置 beforeRouteLeave：

beforeRouteLeave(to, from, next) {

// 设置下一个路由meta

to.meta.keepAlive = false; // 让A不缓存，重新请求数据

console.log(to)

next(); // 跳转到A页面

}

c组件所有代码如下：

返回a页面

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

跳转到b页面

跳转到c页面

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

查看github上的代码

总结

以上所述是给大家介绍的vue2中的keep-alive使用总结及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。