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 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
ES6中Set和Map用法实例详解
Mar 02 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邮件专题
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python: 传递列表副本方式
2019/12/19 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python爬取网页信息的示例
2020/09/24 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
小学数学教学反思
2014/02/02 职场文书
初中班主任评语大全
2014/04/24 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
党性观念心得体会
2014/09/03 职场文书
简易版租房协议书范本
2014/10/13 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
欢迎词范文
2015/01/27 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL