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

想到使用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. vivo 轩辕文件系统：AI 计算平台存储性能优化实践

    在早期阶段,vivo AI 计算平台使用 GlusterFS 作为底层存储基座.随着数据规模的扩大和多种业务场景的接入,开始出现性能.维护等问题.为此,vivo 转而采用了自研的轩辕文件系统,该系统是 ...

  2. Windows 非服务器版本永久关闭命令行“快速编辑模式”

    使用管理员权限运行cmd.exe 运行如下命令: reg add HKEY_CURRENT_USER\Console /v QuickEdit /t REG_DWORD /d 00000000 /f

  3. 「模拟赛」多校 A 层联训 15

    比赛链接 A. 追逐游戏 (chase) 没啥意义的水题,但赛时没调出来. 分讨,LCA 设 \(S\) 和 \(T\) 的 LCA 为 \(lca\) \(S'\) 为 \(lca\) 的祖先节点的 ...

  4. 3.13 Linux建立软硬链接文件(ln命令)

    如果要想说清楚 ln 命令,则必须先解释下 ext 文件系统(Linux 文件系统)是如何工作的.我们在前面讲解了分区的格式化就是写入文件系统,而我们的 Linux 目前使用的是 ext4 文件系统. ...

  5. cmu15545-数据存储(Database Storage)

    蓝图 数据库自己管理磁盘数据和缓冲区,而不是通过操作系统管理(Os is not your friend.). 三层视图 数据库以页(page)为存储数据的基本单位,文件(file)是一系列页的集合, ...

  6. 题解：CF1551D1 Domino (easy version)

    题解:CF1551D1 Domino (easy version) 分析 题目中保证 \(n\times m\) 为偶数,下面进行分类讨论. 情况一 如果 \(n\) 和 \(m\) 都是偶数,那么可 ...

  7. vue2-脚手架

    Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台) https://cli.vuejs.org/zh/ 使用脚手架 安装脚手架 npm install -g @vue/cli 使用脚手架创 ...

  8. VLAN技术

    VLAN是虚拟局域网的缩写,它是一种将网络设备(如交换机.路由器等)分割成多个虚拟网络的技术.每个VLAN都是一个独立的广播域,使得可以在同一物理网络上创建多个逻辑网络,从而提高网络的安全性和灵活性. ...

  9. JS之Class类

    转载:https://juejin.cn/post/7098891689955164168 ECMAScript 6 提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力.类(cl ...

  10. PHP开源项目之YOURLS

    YOURLS是一个开源的PHP的程序,可以利用它来构建属于自己的URL缩短服务,YOURLS还可以集成到WordPress博客中使用. YOURLS 的主要功能: 公开的(Public 任何人都可以用 ...