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

2024-10-19 10:13:16

前提：有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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

示例vue 的keep-alive缓存功能的实现

本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素
vue2使用keep-alive缓存多层列表页的方法

vue关于列表页和详情页的展现比较让人头疼,在列表页面点击进详情页返回以后,列表页会重新刷新.假如在第五页找到的数据,点击修改后返回又跳回第一页了,这个时候就需要用到keep-alive缓存页面数据,但keep-alive缓存的页面一直不会发生改变,特别是列表页层级很多的情况下,更加复杂. 譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了3到4个需要循环展现的数据.在加入keep-alive之前我使用路由和自定义
详解keep-alive + vuex 让缓存的页面灵活起来

引入在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep
vue 使某个组件不被 keep-alive 缓存的方法

提出问题最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周
vue里如何主动销毁keep-alive缓存的组件

问题产生的背景我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境这个项目是基于一个开源 vue
基于vue中keep-alive缓存问题的解决方法

vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用
vue 的keep-alive缓存功能的实现

Vue 实现组件信息的缓存当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 一.在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下:
vue使用keep-alive实现数据缓存不刷新

到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系统优化下,添加缓存了. 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex.vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态管理,重心是在数据处理上:想要实现
vue项目优化之通过keep-alive数据缓存的方法

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓
vue中keep-alive，include的缓存问题

前提:有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
vue中keep-alive内置组件缓存的实例代码

需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解

vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置. 最近在项目中遇到这个问题,思考了几套方案,总是不太完善.百度搜到的方案也基本都只能满足一些很简单的需求.对于复杂一些的情况,还是有些不完善的地方.以下是个人对于这种场景的一个摸索,也参考了百度.如有更好的方案,欢迎指出. 缓存组件,vue2中提供了keep-alive.首
有关vue 组件切换,动态组件,组件缓存

目录一.组件的切换方式方式一: 使用 v-if和v-else 方式二:使用内置组件:<component></component> 方式三 : vue-router 二.组件缓存: keep-alive 1.keep-alive定义 2.keep-alive的生命周期三.keep-alive使用方法 1.Props 2.搭配<component></component>使用 3.搭配<router-view />路由使用 4.清除缓存组件
vue中缓存组件keep alive的介绍及使用方法

目录介绍使用缓存所有的组件缓存某个组件 keep-alive的使用示例 include和exclude属性的使用 include的使用 exclude的使用生命周期介绍 keep-alive是vue的内置组件,可以用来缓存组件.当它包裹动态组件时,会缓存不活动的组件实例,不会销毁它们:将不活动的组件的状态保留在内存中,可以防止重复渲染DOM,减少加载事件和性能消耗. 注意:keep-alive是一个抽象组件,自身不会渲染成一个DOM元素,也不会出现在父组件链中. 原理: 在 crea
详解Vue中组件的缓存

之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中
如何管理Vue中的缓存页面

<keep-alive> <router-view /> </keep-alive> Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时,通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面),显著提高页面二次访问速度,但是也给我们在某些场景带来了困扰,其中包含两个主要矛盾: 缓存页面如何在合适的时机被销毁 (keep-alive组件提供了三个参数来动态配置缓存状态,但是作用有限,后面分析) 同一个路径如何缓存多个不同的页面(同
vue中keep-alive组件实现多级嵌套路由的缓存

目录现状(问题): 探索方案: 实现方式现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中实现方式方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la
vue中,在本地缓存中读写数据的方法

1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good-storage' const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, comp

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

相关推荐

随机推荐