Vue路由组件的缓存keep-alive和include属性的具体使用
更新时间：2023年11月02日 09:16:06 作者：南瓜骨头
：浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下
功能：浏览器页面在进行切换时，原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。
例子：在页面上填好的信息当进行页面切换再转回原来的页面时，原本信息被清空了需要重新填写
keep-alive和include属性的搭配使用
功能：切换路由时，保留被切换路由组件。
格式：
<keep-alive> <router-view/> <keep-alive>
功能：保存所有路由组件
<keep-alive include="组件名称"> <router-view/> <keep-alive>
功能：保存include指定的组件，数组形式可保存多个
<template>
<div>
<div>
<ul>
<li><router-link to="/A">A1 Router-Link</router-link></li>
<li><router-link to="/B">B1 Router-Link</router-link></li>
</ul>
</div>
// 保存所有路由组件
<keep-alive>
<router-view></router-view>
</keep-alive>
// 保存include指定的组件，可保存多个
<keep-alive :include="['A', 'B']">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name : 'App'
}
</script>到此这篇关于Vue路由组件的缓存keep-alive和include属性的具体使用的文章就介绍到这了,更多相关Vue keep-alive和include属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用vant作为UI组件时,需要一个日期时间选择器,vant中有Dateicker和TimePicker,可以将两个组件组合封装使用,下面就来详细的介绍一下2025-12-12
Vue.js使用带有对象的 v-model 来创建自定义组件的详细操作
本文介绍了如何在Vue.js中使用带有对象的v-model来创建自定义组件,通过创建一个封装了多个输入字段的自定义组件,并使用计算属性和深拷贝来处理对象状态,可以实现双向数据绑定,感兴趣的朋友跟随小编一起看看吧2025-12-12
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.2017-03-03
这篇文章主要为大家详细介绍了vue实现简单分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
用户因导入vue-router名称与创建实例不一致导致错误,后发现导入的是index.js文件,省略文件名,但问题仍未解决,需检查挂载配置2025-08-08
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。2016-11-11
下拉框一开始请求第一页的内容,滚动到最后的时候,请求第二页的内容,如此反复,直到所有数据加载完成,这篇文章主要介绍了vue3如何利用自定义指令实现下拉框分页懒加载,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue的路由映射问题及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
为什么在Vue3 setup()中直接解构props会丢失响应性详解
props是响应式的,当传入新的prop时,它将被更新,因为props是响应式的,这篇文章主要介绍了为什么在Vue3 setup()中直接解构props会丢失响应性的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-05-05
这篇文章主要介绍了Vue3中关于ref和reactive的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论