Vue设置keepAlive不生效问题及解决

更新时间：2022年04月15日 16:15:40 作者：YouluBank

这篇文章主要介绍了Vue设置keepAlive不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

设置keepAlive不生效

如演示，Vue页面导航回退后页面重新刷新了，搜索条件及结果都重置了，对于页面需要频繁切换的系统来说，体验不佳，我们希望页面第一次打开时加载，此后回退不再刷新

查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。

1.在App.vue中的设置

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2.在router中的index.js设置

利用meta属性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

正常的话这样页面就能缓存并生效了，如果还是不生效

检查这个组件在router文件中的配置name和组件实例中的name不一致，如下面，全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的，而App.js 中的keepAlive标签中的exclude是对比的组件实例中的name

使用过程发现，组件的name和router配置的name不一样，keep-alive也无法生效，这里也提供给我们一种思路，如果页面不需要缓存，把name设置不一样就好了（不推荐使用）

keep-alive缓存组件不生效的坑

坑出现背景

在维护公司代码时发现里面写watch route不生效，无法监听子路由的table切换。组件不会缓存，但是全局组件已经做过缓存处理。此处每次进入此table页都会触发created周期。花费大半个小时之后终于找到了问题点

坑的原因

keep-alive缓存时include中的名字必须与组件上的名字完全一致，组件没有写名字或者名字不一致就会导致缓存失效，每次进入组件都触发created生命周期

代码如下

全局组件中

   <keep-alive include="history">
       <router-view></router-view>
    </keep-alive>

组件中

export default {
  name: "history",/*此处的name必须有且与include中的一致*/
  components: {
    VTable
  },

如是，问题解决!

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2.x中利用@font-size引入字体图标报错的解决方法
今天小编就为大家分享一篇Vue2.x中利用@font-size引入字体图标报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue基于websocket实现智能聊天及吸附动画效果
这篇文章主要介绍了vue基于websocket实现智能聊天及吸附动画效果,主要功能是基于websocket实现聊天功能，封装了一个socket.js文件，使用Jwchat插件实现类似QQ、微信电脑端的功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-07-07
vue+ElementUi+iframe实现轮播不同的网站
需要实现一个轮播图,轮播内容是不同的网站,并实现鼠标滑动时停止轮播,当鼠标10秒内不动时继续轮播,所以本文给大家介绍了用vue+ElementUi+iframe实现轮播不同的网站,需要的朋友可以参考下
2024-02-02
vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果(解决思路)
最近遇到一个问题，我们在企业微信中的 H5 项目中需要用到table表格（支持懒加载上划加载数据），但是他们在锁头、锁列的情况下，依旧会出现边界橡皮筋效果，这篇文章主要介绍了vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果,需要的朋友可以参考下
2023-02-02
vue-router路由懒加载及实现方式
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下
2022-12-12
vue.js实现动态面包屑
这篇文章主要为大家详细介绍了vue.js实现动态面包屑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue实现下拉加载更多
这篇文章主要为大家详细介绍了Vue实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue项目实现点击目标区域之外可关闭(隐藏)目标区域
这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue组件实现原理详细分析
这篇文章主要介绍了Vue组件基础操作，组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用
2023-01-01
vuex中store的action和mutations用法
这篇文章主要介绍了vuex中store的action和mutations用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04