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 相关文章推荐
基于jquery的一个图片hover的插件
Apr 24 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
canvas红包照片实例分享
Feb 28 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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 危险函数全解析
2009/09/09 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python 复平面绘图实例
2019/11/21 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
python压包的概念及实例详解
2021/02/17 Python
关于圣诞节的广播稿
2014/01/26 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
房屋转让协议书范本
2014/04/11 职场文书
社区党建工作方案
2014/06/10 职场文书
花坛标语大全
2014/06/30 职场文书
查摆问题整改措施
2014/10/24 职场文书
《青山不老》教学反思
2016/02/22 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Navicat连接MySQL错误描述分析
2021/06/02 MySQL