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和webrtc-streamer实现实时视频播放(监控设备-rtsp)
WebRTC-streamer是一项使用简单机制通过WebRTC流式传输视频捕获设备和RTSP源的实验,下面这篇文章主要给大家介绍了关于如何使用VUE和webrtc-streamer实现实时视频播放(监控设备-rtsp)的相关资料,需要的朋友可以参考下2022-11-11基于vue,vue-router, vuex及addRoutes进行权限控制问题
这篇文章主要介绍了基于vue,vue-router, vuex及addRoutes进行权限控制问题,需要的朋友可以参考下2018-05-05
最新评论