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

想到使用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. Machine Learning Week_1 Model and Cost Function 1-4

    目录 2 Model and Cost Function 2.1 Video: Model Representation unfamiliar words 2.2 Reading: Model Rep ...

  2. AI五子棋_09 消息循环实现自动对局

    AI五子棋 第九步 恭喜你到达第九步! 上一步我们已经完成了一个AI大脑的最核心功能.我们可以用它来对战了. 访问服务器 http://202.207.12.156:9012/join_game,会返 ...

  3. java的split方法的转义字符

    一.实例 我们都知道  String s="ad,dfjdlfs,df,s,dfl"; 执行 String re[]=s.split(",");     则re ...

  4. 初识GO语言--流程控制

  5. 基于Hadoop实现的对历年四级单词的词频分析（入门级Hadoop项目）

    前情提要:飞物作者屡次四级考试未能通过,进而恼羞成怒,制作了基于Hadoop实现的对历年四级单词的词频分析项目,希望督促自己尽快通过四级(然而并没有什么卵用) 项目需求:Pycharm.IDEA.Li ...

  6. 在美国和以色列的技术支持下BP机可以爆炸，那么苹果手机是否也可以被远程引爆

    要知道,这一切在技术上都是可以实现的. 由此可见,带电池的产品,最为稳妥的办法就是购买在中国组装的产品,否则其安全性是无法保证的.有人可能会说美国政府不会单独的通过这种方法去定向的杀害某个中国普通人, ...

  7. Java8之新特性

    简单例子 实例: ​ 处理集合时,通常会迭代遍历它的元素,并在每个元素上执行某项操作,例如假设我们想要对某本的所有长单词进行计数,首先需要将所有单词放到一个列表中 var contents = new ...

  8. QT5.15.2 连接MySQL 驱动问题解决方案,无论菜鸟🐦️还是老鸟🦜，解决了就是好鸟🦚

    最新在学QT,现在QT只能在线安装了,用了几天,看到数据库时,需要用MySQL,结果出现了问题. QSqlDatabase: QMYSQL driver not loaded. QSqlDatabas ...

  9. 一键生成美观的彩页演示+AI的训练过程科普

    一键生成美观彩页 + AI训练揭秘:让你的内容瞬间高大上! 阅读时间: 8分钟 | 字数: 1300+ 你是否曾为制作精美的演示文稿而烦恼?是否对AI的训练过程充满好奇?今天,让我们一起探索如何用AI ...

  10. 用MySQL5.7的客户端连接MySQL8.0的服务端竟然报错，不是说好向下兼容吗？

    在默认条件下,用MySQL5.7的客户端连接MySQL8.0的服务端竟然报错,不是说好向下兼容吗? WHAT?报错如下:[root@node234 ~]# mysql -ushukuinfo -p'1 ...