基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular、react、vue等MVVM框架来开发单页架构的web app。但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题:
- 识别前进后退行为
- 后退时恢复之前的页面
笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路。
识别前进后退
先说第一个问题。和原生app不一样,浏览器中主要有这几个限制:
- 没有提供前进后退的事件
- 不允许开发者读取浏览记录
- 用户可以手动输入地址,或使用浏览器提供的前进后退来改变url
解决方案是自己维护一份浏览记录,每次url改变时,通过与记录的浏览记录作对比,从而判断出前进后退行为:
- url存在于浏览记录中即为后退
- url不存在于浏览记录中即为前进
- url在浏览记录的末端即为刷新
另外,应用的路由路径中可能允许相同的路由出现多次(例如A->B->A),所以给每个路由添加一个key值来区分相同路由的不同实例。
这个浏览记录需要存储在sessionStorage
中,这样用户刷新后浏览记录也可以恢复。
后退时恢复之前的页面
识别出后退行为后,下一步就是像原生一样恢复之前的页面了。
一种方案是页面继续存储在DOM中,添加样式display: none
来告诉浏览器不渲染该元素,但是缓存的页面多了DOM就会变得很大,会影响页面的性能,本文不讨论这个方案。
另一种方案是将数据缓存到内存中,开发者需要将页面的数据存储起来,当返回到该页面时,再根据数据将页面恢复。但是这样每个页面存储的数据不通,一般需要进行额外的编码,如果有一种更底层的方案能解决这个问题,并且对开发者是透明的,就最好了,所以尝试并开发了vue-navigation。
在vue-navigation 0.x版本的时候,借助了vue的keep-alive来缓存页面,但是keep-alive
是根据组件的name或tag来决定缓存的,所以带来了很多限制。
通过拜读keep-alive
的源码,了解到它的缓存机制后,就自己实现了一个管理缓存的组件,来灵活地缓存子组件,实现思路如下:
- 每次
render
时,先取到子组件的vnode
(vue的虚拟dom) - 计算出
vnode
的key,把key值赋给vnode
避免vue-router复用组件实例 根据key值判断该节点是否已缓存
- 已缓存:将缓存的实例赋给
componentInstance
,这样vue就会根据这个实例来恢复组件 - 未缓存:将
vnode
存储到内存中,下次返回到该页面时可以从内存中恢复
- 已缓存:将缓存的实例赋给
另外还需要添加一个清除缓存的逻辑,当自己维护的浏览记录变化时,根据浏览记录清除不需要的缓存(例如当前的路由是:A->B->C,用户从C直接返回到了A,那么B和C都需要从缓存中删除)。
最后
虽然是基于vue来开发的,但是思路是不变的,使用其他框架也可以做到同样的事情。
还是安利一下vue和vue-navigation。使用插件后,再将router-view
放在navigation
下就有缓存功能了。
main.js
import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 启动你的应用...
App.vue
<template><navigation><router-view></router-view></navigation>
</template>
最后欢迎大家讨论或提供更好的解决方案。
基于vue的移动web app页面缓存解决方案相关推荐
- 转:基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- 基于Vue的蔬菜购买APP
基于Vue的蔬菜购买APP 基于Vue的蔬菜购买APP 1.系统功能模块介绍 2.系统基本功能介绍及分析 实现效果 Github链接 基于Vue的蔬菜购买APP 使用Vue脚手架和Vant搭建的H5界 ...
- 基于vue的英语单词App
基于vue的英语单词App 项目介绍 首页界面 学习界面 复习界面 测试界面 设置界面 默认单词界面 下载方式 项目介绍 社会生活的信息化和经济的全球化,使英语的重要性日益突出.英语作为最重要的信息载 ...
- 基于 vue +better scroll滑动切换页面 并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览 效果看完,感 ...
- vue页面缓存解决方案
关于vue页面通过解决方案 方案一:使用keep-alive和v-if (备注:这种方案有问题,关闭面板后,在通过菜单打开页面还是有缓存) 1.添加keep-alive <keep-alive& ...
- ssm基于Vue的共享单车app系统
开发工具(eclipse/idea/vscode等):idea 数据库(sqlite/mysql/sqlserver等):mysql 功能模块(请用文字描述,至少200字): 系统主要基于VUE框架设 ...
- vue项目之H5 app页面通过swiper实现中间变大,两边缩小的滑动轮播功能
一.需求 微信H5,小程序,APP三端:手动滑动实现中间放大,两边图片缩小的效果. 可视区可看到三张图,其中左右两边的仅出现一小部分.如图 二.实现 按照依赖包 npm install vue-awe ...
- web app页面要求
代码: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum- ...
- 基于vue.js的uni app跨平台框架webapp、安卓app、苹果app、微信小程序 毕业设计 毕设作品 开题报告论文参考(2)预约订座APP系统
效果图
最新文章
- day36-hibernate检索和优化 02-Hibernate检索方式:简单查询及别名查询
- Kafka为什么速度那么快?
- 阿里云分析型数据库AnalyticDB:使用Logstash插件进行高效数据写入
- My Opportunity应用点击Edit后出现time out的错误分析
- 复原 IP 地址Python解法
- css网页练习-3视觉
- failed to accept an incoming connection: connection from 192.168.1.114 rejected, allowed hosts: 1
- 正向混合云和反向混合云解析
- Android客户端和服务器端数据交互的第三种方法
- python bartender_bartender使用教程 - 卡饭网
- 土壤数据库一些参数解释和补充说明
- 【Windows Server 2019】企业虚拟专用网络服务的配置和管理(上)
- 宝宝树全自动引流脚本软件高质量活跃粉丝
- hdu计算机网络实验,计算机网络实验报告(杭电).doc
- 力扣707设计链表(单链表,JavaScript)
- 把php数据转成json格式转换,php将从数据库中获得的数据转换成json格式并输出的方法...
- 链上数据分析—NFT 项目质量评估
- redis-cli redisTemplate执行Lua脚本,解决redisTemplate.opsForSet().members获取数据问题
- POI Exercise
- 2021年江阴各高中高考成绩查询,2021年江阴高考状元名单公布,江阴文理科状元是谁多少分...