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取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
Javascript confirm多种使用方法解析
Sep 25 Javascript
canvas绘制折线路径动画实现
May 12 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 Static延迟静态绑定用法分析
2016/03/16 PHP
php上传大文件设置方法
2016/04/14 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python实现的建造者模式示例
2018/08/06 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
shell程序中如何注释
2012/01/28 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
教师节领导致辞
2015/07/29 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js