Vue - 缓存页面(keepAlive)
2023-09-11 14:15:54 时间
前言
项目主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,同时也可以很大程度上减少接口请求,减小服务器压力。
例如,我们将某个列表类组件内容滑动到第 100 条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第 100 条列表处
可以看到如下图所示,根据条件查询到结果后,
点击进入详情再返回来,保留了进入详情前的搜索条件、结果、位置等。
解决方案
被包裹在
keep-alive
中的组件的状态将会被保留,
一、配置路由 keepAlive
属性为 true
,如下代码所示:
routes: [
{
path: '/index',<
相关文章
- [转] 深入理解vue 一些底层原理
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【Vue/js】通过localStorage浏览器实现变量和对象的本地缓存(图文+完整源代码)
- 【Vue】通过keep-alive实现路由组件的数据缓存
- Vue创建一个路由项目(Vue Router)
- Vue - 点击导航栏当前标签后变色功能(导航栏当前hover样式)
- 【vue系列-04】vue的表单数据收集,基本指令和自定义指令
- (19)打鸡儿教你Vue.js
- 解析Nuxt.js Vue服务端渲染摸索
- vue多入口且有页面缓存keep-alive最佳处理方式
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue 取消 axios 重复请求,将性能优化进行到底(你知道发出去的请求还能这么取消吗?)
- vue-router 之 keep-alive路由缓存处理include+exclude
- vue组件---插槽
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- Vue Router安装与基本使用
- Vue富文本编辑器的使用vue-quill-deitor
- vue项目做微信网页授权
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- vue后台(五)
- 初识Vue之基础指令使用(初学者请进~)
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- 【VUE】vue配置Gzip压缩
- vue-解决Vue打包上线之后部分CSS不生效的问题