现在移动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的源码，了解到它的缓存机制后，就自己实现了一个管理缓存的组件，来灵活地缓存子组件，实现思路如下：

1. 每次render时，先取到子组件的vnode（vue的虚拟dom）
2. 计算出vnode的key，把key值赋给vnode避免vue-router复用组件实例
3. 根据key值判断该节点是否已缓存
   1. 已缓存：将缓存的实例赋给componentInstance，这样vue就会根据这个实例来恢复组件
   2. 未缓存：将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  # 页面缓存  # vue.js  # vue移动端项目中如何实现页面缓存的示例代码  # vue页面跳转实现页面缓存操作  # Vue2.0 实现页面缓存和不缓存的方式  # vue项目强制清除页面缓存的例子  # vuex + keep-alive实现tab标签页面缓存功能  # vue服务端渲染页面缓存和组件缓存的实例详解  # Vue项目全局配置页面缓存之按需读取缓存的实现详解  # 详解vue之页面缓存问题(基于2.0)  # vue实现页面缓存功能  # 即为  # 就会  # 到该  # 好了  # 放在  # 第一个  # 就有  # 不需要  # 开发了  # 有一种  # 但在  # 这两个  # 带来了  # 不存在  # 欢迎大家  # 还需要  # 那一  # 用户可以  # 这几个  # 再将 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  移动端脚本框架Hammer.js  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  详解jQuery停止动画——stop()方法的使用  EditPlus中的正则表达式实战(6)  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Laravel如何实现事件和监听器？（Event & Listener实战）  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何用PHP工具快速搭建高效网站？  装修招标网站设计制作流程,装修招标流程？  如何快速搭建虚拟主机网站？新手必看指南  如何利用DOS批处理实现定时关机操作详解  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  如何登录建站主机？访问步骤全解析  在Oracle关闭情况下如何修改spfile的参数  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  图册素材网站设计制作软件,图册的导出方式有几种？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  如何用AWS免费套餐快速搭建高效网站？  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  济南网站建设制作公司,室内设计网站一般都有哪些功能？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  如何在云指建站中生成FTP站点？  详解阿里云nginx服务器多站点的配置  如何在宝塔面板中创建新站点？  如何在新浪SAE免费搭建个人博客？  如何用西部建站助手快速创建专业网站？  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  音乐网站服务器如何优化API响应速度？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  太平洋网站制作公司,网络用语太平洋是什么意思？  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  如何用PHP快速搭建高效网站？分步指南  Laravel如何记录自定义日志？（Log频道配置）  Laravel如何集成Inertia.js与Vue/React？（安装配置）  Laravel集合Collection怎么用_Laravel集合常用函数详解  如何在阿里云服务器自主搭建网站？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  Java解压缩zip - 解压缩多个文件或文件夹实例