vue2中的keep-alive使用总结及注意事项


Posted in Javascript onDecember 21, 2017

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>
 <div class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/detail">跳转到detail页</router-link>
 </div>
</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>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/list">返回列表页</router-link>
 </div>
</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>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </div>
</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>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </div>
</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>
 <div class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/b">跳转到b页面</router-link>
 <router-link to="/c">跳转到c页面</router-link>
 </div>
</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组件请求数据(包括点击链接和浏览器后退按钮).

查看github上的代码

总结

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

Javascript 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
webpack写jquery插件的环境配置
Dec 21 #jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 #Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 #Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 #Javascript
代码详解Vuejs响应式原理
Dec 20 #Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 #Javascript
在一个页面实现两个zTree联动的方法
Dec 20 #Javascript
You might like
php实现无限级分类
2014/12/24 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
js常用函数 不错
2006/09/08 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python如何安装第三方模块
2020/05/28 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
护理人员的自我评价分享
2014/03/15 职场文书
温馨提示标语
2014/06/26 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书