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

想到使用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. 云电脑玩游戏挑选标准，ToDesk实测体验

    大家玩游戏还在攒机吗?与其花费时间精力在组装游戏电脑上,不如用上最近兴起的云电脑软件.无需额外配备硬件设备,旧电脑原地变身成高性能电脑,随时随地享受游戏乐趣. 但市面上众多的云电脑软件,该怎么选择才能 ...

  2. rqt的安装及详细介绍

    1. 安装 安装极其简单,不多介绍,直接上命令:Melodic: sudo apt-get install ros-melodic-rqt sudo apt-get install ros-melod ...

  3. DRF-Serializers序列化器组件源码分析及改编

    1. 源码分析 注意:以下代码片段为方便理解已进行简化,只保留了与序列化功能相关的代码 序列化的源码中涉及到了元类的概念,我在这里简单说明一下:元类(metaclass)是一个高级概念,用于定义类的创 ...

  4. 离线快速LCA（最近公共祖先） Tarjan算法

    离线快速LCA(最近公共祖先) Tarjan算法 前言 对于 OIer 来说,LCA 一直是处理树上问题的好帮手,无论是倍增还是树剖都有着优秀的 \(\log n\) 的复杂度.不过由于我们(数据规模 ...

  5. 使用原生Web开发技术为在线客服系统提供网页版配置工具

    升讯威在线客服与营销系统是基于 .net core / WPF 开发的一款在线客服软件,宗旨是: 开放.开源.共享.努力打造 .net 社区的一款优秀开源产品. 背景 随着下载私有化部署的用户越来越多 ...

  6. think in java interview-高级开发人员面试宝典(二)

    从现在开始,以样题的方式一一列出各种面试题以及点评,考虑到我在前文中说的,对于一些大型的外资型公司,你将会面临全程英语面试,因此我在文章中也会出现许多全英语样题. 这些题目来自于各个真实的公司,公司名 ...

  7. KnowledgeManagement

    知识管理建议 总则 总参 从无知到有知 资料收集的习惯 发表是最好的记忆 Wiki 使用 建议: Blog 写作 Discuss 搜索技巧 回复:Yibie的知识管理流程与工具选择 一.个人知识管理的 ...

  8. How to display XML in a JTree using JDOM

    How to display XML in a JTree using JDOM This brief tutorial will explain how to use Java to make an ...

  9. Python框架之FastAPI

    原起: 最近项目中现存的是使用的python的异步方式进行开发, 但是只是存在脚本部分, 并没有提供对外的Web服务,正好趁机将Fastapi嵌入其中使用. 官方文档: https://fastapi ...

  10. Kafka可视化工具之Kafka Tool

    官网: https://www.kafkatool.com/download.html Kafka Tool是一个用于管理和使用Apache Kafka集群的GUI应用程序. Kafka Tool提供 ...