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
  },

如是，问题解决!

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

您可能感兴趣的文章:

Vue设置页面全屏实例代码
文章介绍了如何在Vue中设置页面全屏,包括下载插件、全屏、退出全屏、全屏切换等操作,同时,还分享了在若依框架中实现主页面内容全屏的方法,包括配置全局变量和在布局文件中进行设置
2025-02-02
vue-electron中修改表格内容并修改样式
本文主要介绍了vue-electron中修改表格内容并修改样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vue中实现在线画流程图的方法
最近在调研一些在线文档的实现,包括文档编辑器、在线思维导图、在线流程图等,本文分享在Vue框架下基于metaeditor-mxgraph实现在线流程图,感兴趣的朋友一起看看吧
2024-07-07
vue ElementUI的from表单实现登录效果的示例
本文主要介绍了vue ElementUI的from表单实现登录效果的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue 生命周期和数据共享详解
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue3使用百度地图超详细图文教程
这篇文章主要给大家介绍了关于vue3使用百度地图的相关资料,最近一个项目要用到地图，因为微信小程序用的也是百度地图，所以想着网页端也用百度地图,需要的朋友可以参考下
2023-07-07
Vue仿百度搜索功能
这篇文章主要为大家详细介绍了Vue仿百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
关于axios如何全局注册浅析
这篇文章主要给大家介绍了关于axios如何全局注册的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01
使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现代码
这篇文章主要介绍了使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现,具体的步骤如下,需要的朋友可以参考下
2023-03-03
vue input 输入校验字母数字组合且长度小于30的实现代码
这篇文章主要介绍了vue input 校验字母数字组合且长度小于30的实现代码，文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能，感兴趣的朋友跟随脚本之家小编一起看看吧
2018-05-05