<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. linux扩展分区

    linux扩展分区 1.准备工作 系统版本:ubuntu20.04 工具:一个安装了ubuntu系统的系统U盘或者ubuntu系统制作的启动盘 2.缩小分区 要扩展某一个分区,再没有空闲空间时需要从其 ...

  2. 直播相关-搭建直播流服务器nodejs

    一.安装nodejs环境 去nodejs官方网站下载安装包 https://nodejs.org/en/#download 安装完成之后测试: LUNLI-MC1:~ lunli$ node -v v ...

  3. (四)基于multiprocessing.dummy线程池爬取梨视频的视频信息

    功能:爬取梨视频科技栏最热的几个视频.  1. 找到视频对应的通用标签 可以看出关于视频的信息都存放在li标签中 2. 拿到视频的名称以及对应的url 3.进入Video的url,找到视频信息的地址 ...

  4. Vue3:项目创建

    Vue 3 相对于 Vue 2 带来了许多改进和优点,这些改进主要是为了提高性能.开发体验和可维护性.但是对于创建项目,Vue3也可以采用跟Vue2相同的方式. 使用CLI创建 1. 安装Vue CL ...

  5. 《Android开发卷——HTTP网络通信,HTTP网络连接》

    为了访问互联网,需要设置应用程序获取"androd.permission.INTERNET"权限的许可. 一.使用Apache接口(org.apache.http)并实现网络连接的 ...

  6. 《Android开发卷——自定义日期选择器(三)》

                 继 <Android开发卷--自定义日期选择器(一)>:http://blog.csdn.net/chillax_li/article/details/19047 ...

  7. 在 Wed 中应用 MyBatis(同时使用MVC架构模式,以及ThreadLocal 事务控制)

    1. 在 Wed 中应用 MyBatis(同时使用MVC架构模式,以及ThreadLocal 事务控制) @ 目录 1. 在 Wed 中应用 MyBatis(同时使用MVC架构模式,以及ThreadL ...

  8. FFmpeg如何将一个gif嵌入视频指定位置并指定显示时间

    背景 很简单的需求:我需要将一个gif嵌入到视频里面的指定位置,并要指定时间播放: 环境 windows11 64位专业版 ffmpeg version 2022-04-07-git-607ecc27 ...

  9. 将PaddleOCR 转为 ONNX 运行

    PaddleOCR 是目前最好的开源OCR框架, 但paddle框架的兼容性实在不怎么好, 部署的时候容易出现各种各样的问题. 如果能把PaddleOCR转成ONNX, 就可以跳过paddle框架坑的 ...

  10. .NET Core MVC基础之页面传值方式📃

    .NET Core MVC基础之页面传值方式 前言 最近工作太忙了,浅浅更新一下.NET基础知识.大部分面试官都会问.NET页面传值的几种方式,那么接下来就来细讲与实现一下吧! 页面传值分成两类 第一 ...