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

想到使用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_2 Environment Setup Instructions

    PerFace 第二周会使用矩阵来扩充之前的线性回归和梯度下降. 第二周一开始,吴恩达老师在课程开始前,引导我们做 MATLAB 和 Octave 的前期准备工作.这两个都可以完成编程作业.给了Oct ...

  2. SpringBoot之后端图形验证码实现

    此验证码的实现没有用到太多的插件,话不多说直接上代码,大家拿过去就可以用. 1.验证码类 package com.youyou.login.util.validatecode; import lomb ...

  3. 谈一谈 Netty 的内存管理 —— 且看 Netty 如何实现 Java 版的 Jemalloc

    本文基于 Netty 4.1.112.Final 版本进行讨论 在之前的Netty 系列中,笔者是以 4.1.56.Final 版本为基础和大家讨论的,那么从本文开始,笔者将用最新版本 4.1.112 ...

  4. C++ 简易消息循环

    前言 本文将向大家介绍如何使用 C++ 的标准库实现一个异步和并发编程中都非常重要的编程模式:消息循环(Event Loop).尽管市面上存在不少库也提供了同样的功能,但有时候出于一些原因,我们并不想 ...

  5. WebElement的常用属性和方法

    WebElement是WebDriver.find_element()方法返回的一个对象,该对象用来描述Web上的一个元素,比如输入框,按钮等.本节介绍WebElement的常用属性和方法. 一.We ...

  6. Linux Shell简介

    目录 Shell是什么 基本介绍 用Shell编写HelloWorld Shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以 ...

  7. Air780EP低功耗4G模组AT开发：阿里云应用

    ​ Air780EP是合宙推出的一款低功耗4G全网通模组,兼容模组行业1618经典封装,支持OpenCPU开发及全功能数传AT开发,可广泛应用于多样化的物联网终端. 针对客户朋友需求反馈,本期特别推出 ...

  8. 成本立降50%！在EKS上借助Karpenter部署大模型

    原文链接: https://aws.amazon.com/cn/blogs/containers/scaling-a-large-language-model-with-nvidia-nim-on-a ...

  9. 【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01

    随着人工智能技术的不断发展,阿里体育等IT大厂,推出的"乐动力"."天天跳绳"AI运动APP,让云上运动会.线上运动会.健身打卡.AI体育指导等概念空前火热.那 ...

  10. MySQL-8.3.0 innovation 创新版本YUM安装配置

    MySQL-8.3.0 innovation版本已发布了,想抢先体验一下最新的功能,可以用以下的方式快速在虚拟机上安装一下哈 服务器环境:[root@node213 ~]# cat /etc/redh ...