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属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
关于vue2使用element UI中Descriptions组件的遍历问题详解
最近element-ui遇到了很多坑,下面这篇文章主要给大家介绍了关于vue2使用element UI中Descriptions组件的遍历问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了关于vue路由监听事件跳转的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue项目组件化工程开发实践方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
这篇文章主要介绍了Vue仿今日头条实例详解，并把相关代码做了说明，对此有兴趣的朋友参考下吧。2018-02-02
这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
本文分步骤给大家介绍vue给不同环境配置不同打包命令的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
动态组件指的是动态切换组件的显示与隐藏,这篇文章主要给大家介绍了关于vue学习记录之动态组件的相关资料,本文通过示例代码介绍介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue2路由基本用法,结合实例形式分析了vue2路由基本功能、原理、用法与操作注意事项,需要的朋友可以参考下2020-03-03
这两天在学习vue，主要是为了实现前后端的分离，因此数据的传输是必不可少的一个环节，这篇文章主要介绍了JSON数组和JSON对象在vue中的获取方法,需要的朋友可以参考下2022-09-09
最新评论