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>
文章来源地址https://www.toymoban.com/news/detail-741479.html
文章来源：https://www.toymoban.com/news/detail-741479.html
到了这里，关于Vue路由组件的缓存keep-alive和include属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
