(尚042) vue_缓存路由组件
2023-09-11 14:14:08 时间
现在About切换后效果:
值不在了,说明About是个新的,要想值存在,About必须是个老的,旧的,被切换时死亡,在切换时重新创建;
要想不死亡,需要将它缓存起来,怎样缓存呢?
<keep-alive>
<router-view></router-view>
</keep-alive>
=============================================================
缓存路由组件对象
1. 理解
1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2) 如果可以缓存路由组件对象, 可以提高用户体验
2. 编码实现
<keep-alive>
<router-view></router-view> //让router-view 管理的组件保持活着
</keep-alive>
3.代码图片
可以在input框中输入数据来测试.
====================================================================================================================================
应用场景:
列表是从后台获取的(花了很大力气从后台获取过来)
table1和table2来回切换时,用户体验会很差
数据显示要求实时性:(数据显示要求实时性高/低,高意味着要尽快和后台的数据保持一致,比如:股票的实时性最高,不能使用)
相关文章
- 如何用vue打造一个移动端音乐播放器
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
- Vue_(Router路由)-vue-router路由的基本用法
- Vue- 绑定的图片不显示
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue之单表输入绑定
- vue裁剪图片
- vue 使用路由重复跳转同一页面
- vue+webpack开发(三)
- Easy Mock以及Vue+Mock.js模拟数据
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- Vue computed属性
- [Vue @Component] Control Template Contents with Vue's Render Function
- Atitit vue.js 把ajax数据 绑定到form表单
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Vue 多个路由文件的合并
- 一文你带快速认识Vue-Router路由
- vue-router路由实现页面的跳转
- Vue-router路由判断页面未登录跳转到登录页面
- 160:vue+openlayers 地图上添加Echarts柱状图
- 115:vue+openlayers 加载XYZ地图 ( 示例代码 )
- Vue 内联样式的数据绑定
- ECharts用法及常用配置项详解(Vue环境)
- 【vue】vue中如何使用http代理解决跨域问题_11
- SSR是什么?Vue中怎么实现?