[发明专利]一种H5单页应用路由组件动态缓存方法

说明书

本发明提供的一种H5单页应用路由组件动态缓存方法包括：在store仓库router模块定义state状态值并赋值给keep‑live组件属性值；在路由记录meta配置项中添加routerPrev、routerNext及keepAlive自定义属性；进行路由导航时添加预先设定的哈希hash参数。能够在不修改vue‑router框架源代码，不侵入业务代码，不增加开发者工作量，不增加业务组件逻辑功能的情况下，实现了H5单页应用中路由组件动态缓存功能，解决了H5单页应用难以实现路由组件前进重新加载，后退不刷新和在应用单次访问会话期间无法保留历史路由组件数据及状态的问题。

技术领域

本发明涉及数据缓存领域，尤其涉及一种H5单页应用路由组件动态缓存方法。

背景技术

由于H5单页应用(SPA)渲染原理(以vue项目为例)：进入路由导航时，统一资源定位符(url)的更改触发路由对应的onHashChange/pushState/popState/replaceState方法，通过统一资源定位符(url)中的path路径去匹配路由配置文件中对应的路由组件，加载并实例化渲染在项目出口路由视图(router-view)中。一般而言，一个应用中路由视图的渲染出口只有一个，意味着一个路由组件实例的解析渲染则意味着另外一个路由组件实例的销毁，导致在应用访问期间，即便是我们已经访问过的渲染过的路由组件，在路由导航返回时，其对应路由组件也会重新加载，重新初始化，致使组件状态丢失，用户体验不佳，有时还会重复请求网络数据造成不必要的资源浪费。

而如果使用vue-router插件的keep-alive组件提供的路由组件缓存功能，由于vue-router本身没有提供对缓存组件的动态增加删除接口。一旦路由组件被缓存，那么在应用访问会话期间将一直留存在缓存栈中，当路由导航再次进入时，哪怕参数已经更改，vue-router插件也只会从已缓存的组件列表中获取组件并重新渲染，这种情况下路由组件就无法重新加载，状态无法更新，严重时将导致业务逻辑错误。另外，vue-router插件无法获取当前应用的路由导航访问历史栈，开发者也不能对当前应用路由访问缓存历史栈进行操作，然而在某些特殊的场景下，开发者需要动态更新已被缓存的组件。

采用vue-page-stack方法，不支持嵌套路由，在一些场景下会出现统一资源定位符(url)变化而页面完全无反应的情况，存在缺陷。并且这种方案对业务代码侵入性都很强，会在统一资源定位符中增加对业务无意义的多余字段(stack-key)。

进入二级页面之后，进行页面刷新，存在页面找不到的问题。

是基于vue-router3.0源码深度改造，并且已较长时间不更新，无法在vue-router4框架中使用。另外一旦vue-route框架进行更新，就得进行相对应更新，否则将存在兼容问题。

采用嵌套子路由+叠页面方案，路由记录配置格式需要做改造，路由组件之间必须成嵌套关系，对统一资源定位符(url)有一定要求。

父子页面之间样式耦合程度高，相互影响，不符合组件独立的设计原则。父子页面之间跳转与实际浏览器访问栈并不对应，在使用浏览器自带后退、前进功能时，页面栈将错乱。非父子页面之间无法实现前进重新加载，后退不刷新功能。如果强行将不相关模块配置为父子路由，将导致模块之间配置相互不独立，功能逻辑混淆不清，不便于开发者理解，大大增加了开发难度，增大了项目风险。

发明内容

鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种H5单页应用路由组件动态缓存方法。

根据本发明的一个方面，提供了一种H5单页应用路由组件动态缓存方法包括：

在store仓库router模块定义state状态值并赋值给keep-live组件属性值；

在路由记录meta配置项中添加routerPrev、routerNext及keepAlive自定义属性；