Vue路由组件的缓存keep-alive和include属性的具体使用
作者：南瓜骨头
：浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了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属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！