<keep-alive :include="keepAliveData">
<router-view v-if="isShowRouter" />
</keep-alive>

当我们不想每次使用路由跳转时都从新加载页面的时候,就可以使用 keep-alive 去设置,添加之前默认缓存所有页面,如果需要指定自己想要的页面缓存或者不缓存可以通过include和exclude属性去设置。

如上代码,绑定keepAliveData数组内的组件加入缓存。但是如果你没有在组件里面设置name属性,是不会生效的。所以如果你的缓存没有生效,有可能是这个原因。需要添加name属性。

vue 路由缓存 keep-alive include和exclude无效的更多相关文章

  1. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  2. Vue 路由缓存

    问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了 解决方案   vue 2.0     之中  有k ...

  3. VUE keepAlive缓存问题之动态使用exclude(会使用到VUEX)

    exclude是啥? 官方解释: 怎么用呢? 处理的问题是什么?(答:返回首页的时候清除B页面的缓存) 我遇到的问题是: 一开始状态:A(首页). B(列表).C(列表中的详情)三个页面,设置B页面的 ...

  4. 对比keep-alive路由缓存设置的2种方式

    方式有两种 .路由元信息(2.1.0版本之前) .属性方式(2.1.0版本之后新增) Vue2.1.0之前: 想实现类似的操作,你可以: 配置一下路由元信息 创建两个keep-alive标签 使用v- ...

  5. vue路由在keep-alive下的刷新问题 对watch的影响

    转载自:https://www.cnblogs.com/dansingal/p/8302100.html 问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. 1 2 ...

  6. vue路由在keep-alive下的刷新问题

    问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. <transition name="fade" mode="out-in&q ...

  7. vue - Vue路由(扩展)

    忙里偷闲,还在学校,趁机把后面的路由多出来的知识点学完 十.缓存路由组件 让不展示的路由组件保持挂载,不被销毁 在我们的前面案例有一个问题,都知道vue的路由当我们切换一个路由后,另一个路由就会被销毁 ...

  8. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  9. Vue路由开启keep-alive时的注意点

    Vue路由开启keep-alive时的注意点   这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...

  10. Webpack热加载和React(其中有关于include和exclude的路径问题)

    看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...

随机推荐

  1. TDSQL数据库考试实操题

    第一题: 演练二 物理备份(5分) 答: 第二题:2. 演练一 请根据给定的演练方案,进行相关演练,并按如下要求提交截图 主备切换(5分) 答: 第三题:3. 演练一 请根据给定的演练方案,进行相关演 ...

  2. wrk压测工具安装和使用

    wrk压测工具安装: mkdir wrk git clone https://github.com/wg/wrk.git cd wrk/ cp wrk /usr/sbin/ wrk压测工具使用 使用方 ...

  3. redhat8 添加scsi类型的硬盘后开机重配虚拟机 且黑屏

    原因:因为vmware磁盘优先级里nvme类型的磁盘比scsi类型的磁盘优先级高,所以开机先启动scsi类型的磁盘 又因为scsi并不是系统盘所以不能够实现开机 解决方法: 改变vmware的磁盘优先 ...

  4. 还在拼冗长的WhereIf吗?100行代码解放这个操作

    通常我们在做一些数据过滤的操作的时候,经常需要做一些判断再进行是否要对其进行条件过滤. 普通做法 最原始的做法我们是先通过If()判断是否需要进行数据过滤,然后再对数据源使用Where来过滤数据. 示 ...

  5. 通过 Helm Chart 部署 Easysearch

    Easysearch 可以通过 Helm 快速部署了,快来看看吧! Easysearch 的 Chart 仓库地址在这里 https://helm.infinilabs.com. 使用 Helm 部署 ...

  6. Go版RuoYi

    RuoYi-Go  https://github.com/Kun-GitHub/RuoYi-Go 1. 关于我 个人介绍 2. 介绍 后端用Go写的RuoYi权限管理系统 (功能正在持续实现)后端 G ...

  7. 解决 Error running ‘Application‘: Command line is too long.

    一.项目场景:运行刚拉取下来的项目代码,出现下面问题描述的错误提示. 二.问题描述Error running 'Application': Command line is too long. Shor ...

  8. mysql删除主键索引,删除索引语法

    mysql删除主键索引,删除索引语法 ### Incorrect table definition; there can be only one auto column and it must be ...

  9. com.netflix.hystrix.exception.HystrixBadRequestException: null

    com.netflix.hystrix.exception.HystrixBadRequestException: null 排查方法:如果有多个feign接口的调用,可以在每个调用的方法加上try- ...

  10. Chrome插件:​Vue.js Devtools 高效地开发和调试

    ​ 在现代前端开发中,Vue.js因其灵活性和性能优势,受到越来越多开发者的青睐.然而,随着项目规模的扩大,调试和优化变得愈发复杂.幸运的是,Vue.js Devtools的出现,为开发者提供了一套强 ...