vue中keep-alive,include的缓存问题


Posted in Javascript onNovember 26, 2019

前提:有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面),B是订单列表页,C是订单详情页,D是费用详情页

需求:顺序是A->B->C->D,每次都刷新页面,D->C->B时走缓存,但是每次从A到B都要刷新B页面,从B到C需要刷新C页面,从C到D要刷新D页面

在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存。在这里主要用include结合vuex来实现(四个页面组件都有自己的name才会生效,这里name就叫A,B,C,D)

从D->C,从C->B,从B->A 可以写一个公共的头部返回组件,统一使用 this.$router.go(-1)返回前一页

App.vue

<template>
 <div class="app">
  <keep-alive :include="keepAlive" >
   <router-view/>
  </keep-alive>
 </div>
</template>

<script type='text/javascript'>
export default {
 data () {
  return {}
 },
 computed: {
  keepAlive () {
   return this.$store.getters.keepAlive
  }
 }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  keepAlive: []
 },
 mutations: {
  SET_KEEP_ALIVE: (state, keepAlive) => {
   state.keepAlive = keepAlive
  }
 },
 getters: {
  keepAlive: state => state.keepAlive
 }
})

每次进入B页面时先初始化 keepAlive(设置要走缓存的页面)

A.vue

<script>
  export default {
    name: 'A',
    methods: {
      buttonClick () {
        this.$store.commit('SET_KEEP_ALIVE', ['B', 'C', 'D']) 



  this.$router.push('/B') 



 } 


 } 

}
</script>

B.vue 该页面用来设置缓存和清除缓存

<script>
  export default {
    name: 'B',
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (from.path.indexOf('C') > -1) {
          vm.$store.commit('SET_KEEP_ALIVE', ['B'])
        }
      })
    },
    beforeRouteLeave (to, from, next) {
      if (to.path.indexOf('C') > -1) {
        this.$store.commit('SET_KEEP_ALIVE', ['B', 'C'])
      } else if (to.path.indexOf('A') > -1) {



 this.$store.commit('SET_KEEP_ALIVE', []) 
      }
      next()
    }
 }
</script>

到这里就实现了需求

PS:vue keep-alive include无效

检查版本

确定当前的vue版本的是2.1+

因为include和exclude是vue2.1.0新增的两个属性.

package.json

"vue": "^2.5.2",

检查name

注意,不是router.js中的name,而是单个vue组件中的name属性.

建议将router.js中的name和vue组件的name保持一致,不要混乱.

export default {
  name: "index"
}

多层嵌套

网上的答案几乎都是检查vue组件的name属性,但还是有一个巨坑.

那就是多级嵌套<router-view></router-view>,但凡有超过两个以上的router-view且是父子级关系,请都加上keep-alive,只加一个不会生效.

// app.vue
<keep-alive include="app,index">
  <router-view></router-view>
</keep-alive>

// other.vue
<keep-alive include="app,index">
  <router-view></router-view>
</keep-alive>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 #Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
原生js实现贪食蛇小游戏的思路详解
Nov 26 #Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
JavaScript计算正方形面积
Nov 26 #Javascript
javaScript中indexOf用法技巧
Nov 26 #Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 #Javascript
You might like
PHP制作百度词典查词采集器
2015/01/29 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python实现飞机大战游戏
2020/10/26 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书