首先，我想实现在返回页面时，页面不进行刷新，比如我原先选择的第四页，返回后显示了第一页

想到使用keepAlive缓存组件，大部分推荐的方法为这样，但是不生效

<keep-alive v-if="$route.meta.keepAlive">

        <router-view  />

</keep-alive>

<router-view v-else />

正确的使用方法　

 <keep-alive>

        <router-view v-if="$route.meta.keepAlive" />

  </keep-alive>

  <router-view v-if="!$route.meta.keepAlive" />

原因

通过v-if来判断是否生成keep-alive，当列表页面符合条件时，内存缓存了组件状态。当跳转到详情页时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面进行销毁，再次进入到列表会重新创建　

关于动态使用keepAlive不生效的问题的更多相关文章

  1. vue keep-alive 不生效和多级（三级以上）缓存失败

    vue keep-alive https://cn.vuejs.org/v2/api/#keep-alive keep-alive 不生效的可能原因 如果安装官方的写法,已经正常完成keep-aliv ...

  2. vue第十单元(动态组件 keep-alive（钩子函数） 递归组件（name） 组件命名约定)

    第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...

  3. 标签的增加、删除与复制，动态标签js不生效的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 初始化安装后 Nacos 动态路由配置不生效

    一.问题描述 1.每次初始化安装整套项目,包括安装 Nacos 和其他服务还有mysql,redis等其他中间件,安装后 Nacos 获取不到 nacos 路由信息(包括后续新写入动态路由配置)!只有 ...

  5. Java 项目中一种简单的动态修改配置即时生效的方式 WatchService

    这种方式仅适合于比较小的项目,例如只有一两台服务器,而且配置文件是可以直接修改的.例如 Spring mvc 以 war 包的形式部署,可以直接修改resources 中的配置文件.如果是 Sprin ...

  6. vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作

    https://blog.csdn.net/sinat_37255207/article/details/89373825 因为项目Vue router 连续嵌套了好几层 首先检查keep-alive ...

  7. 详解vue组件的keep-alive

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...

  8. vue-learning：34 - component - 内置组件 - 缓存组件keep-alive

    vue内置缓存组件keep-alive <keep-alive>标签内包裹的组件切换时会缓存组件实例,而不是销毁它们.避免多次加载相应的组件,减少性能消耗.并且当组件在 <keep- ...

  9. 你真的用上keepalive了吗

    转自http://qa.blog.163.com/blog/static/19014700220134771052763/ Keep-Alive即俗称的长连接,使客户端到服务端建立的连接持续有效,当对 ...

  10. Vue keep-alive实践总结

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...

随机推荐

  1. [rCore学习笔记 030] 虚拟地址与地址空间

    时隔很久,终于忙里偷闲可以搞一搞rCore,上帝啊,保佑我日更吧,我真的很想学会. 导读部分 首先还是要看官方文档. 我决定看一遍然后自己表述一遍(智将). 这里反复提到MMU,就是因为之前学MCU的 ...

  2. Python自带difflib模块

    官方文档:https://docs.python.org/3/library/difflib.html difflib模块的作用是比对文本之间的差异,且支持输出可读性比较强的HTML文档,与Linux ...

  3. 接口测试中Groovy引擎的接入实现！

    接口测试中Groovy可以作为上下游接口参数化传递的前置脚本和后置脚本使用,无缝衔接Java语法,groovy的引入对于动态参数化的设置方便很多. 其中核心部分就是接入groovy的引擎,下面介绍gr ...

  4. JESD79-5C_v1.30-2024 JEDEC DDR5 SOLID STATE TECHNOLOGY ASSOCIATION 最新内存技术规范

    JESD79-5C_v1.30-2024 JEDEC DDR5 SOLID STATE TECHNOLOGY ASSOCIATION 最新DDR5内存技术规范 ​ JEDEC 技术协会公布新 DDR5 ...

  5. 1000+节点、200+集群，Slack如何利用Karpenter降本增效？

    原文首发于云妙算 Slack 是一款 AI 工作管理和协作平台.随着业务需求的增长,Slack 对其内部计算编排平台进行了重大改造,以增强可扩展性.提高效率并降低成本.该内部平台的代号为"B ...

  6. git clone 远程代码执行漏洞(CVE-2024-32002) 升级

    接到提醒说git有个漏洞,Git clone 远程代码执行漏洞(CVE-2024-32002) 看了看,说是git的Symlinks模块存在高危漏洞,攻击者可以利用该漏洞执行任意代码,导致服务器失陷. ...

  7. WebLogic XMLDecoder反序列化漏洞

    目录 前言 XMLDecoder概述 XMLDecoder反序列化漏洞 漏洞复现 前言 上篇复现了T3反序列化漏洞,XMLDecoder反序列化在WebLogic中也是一类影响很大的反序化漏洞. XM ...

  8. python中的多继承理解

    在python的多继承中,父类的初始化顺序遵循所谓方法解析顺序(Method Resolution Order,MRO)的机制.python使用C3线性化算法来确定多继承类的MRO: 1. 目标:创建 ...

  9. golang之http请求库go-resty

    github: https://github.com/go-resty/resty go-resty 特性# go-resty 有很多特性: 发起 GET, POST, PUT, DELETE, HE ...

  10. php-fpm常见错误

    1. WARNING: Nothing matches the include pattern '/usr/local/php7/etc/php-fpm.d/*.conf' # cd /usr/loc ...