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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
JS 实现分页打印功能
May 16 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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实现将GB编码转换为UTF8
2006/11/25 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php递归函数怎么用才有效
2018/02/24 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Bootstrap table使用方法记录
2017/08/23 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
Python交换变量
2008/09/06 Python
Python实现的矩阵类实例
2017/08/22 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python2 对excel表格操作完整示例
2020/02/23 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
经典c++面试题三
2015/07/08 面试题
写好自荐信的几个要点
2013/12/26 职场文书
横空出世观后感
2015/06/09 职场文书
演讲比赛主持词
2015/06/29 职场文书
门卫管理制度范本
2015/08/05 职场文书