大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
现在移动web app越来越热门了,许多公司开始尝试使用angular、react、vue等MVVM框架来开发单页架构的web app。但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题:
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、虚拟主机、营销软件、网站建设、下陆网站维护、网站推广。
笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路。
识别前进后退
先说第一个问题。和原生app不一样,浏览器中主要有这几个限制:
解决方案是自己维护一份浏览记录,每次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的源码,了解到它的缓存机制后,就自己实现了一个管理缓存的组件,来灵活地缓存子组件,实现思路如下:
另外还需要添加一个清除缓存的逻辑,当自己维护的浏览记录变化时,根据浏览记录清除不需要的缓存(例如当前的路由是: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
最后欢迎大家讨论或提供更好的解决方案。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。