【技术实现步骤摘要】
一种H5单页应用路由组件动态缓存方法
[0001]本专利技术涉及数据缓存领域,尤其涉及一种H5单页应用路由组件动态缓存方法。
技术介绍
[0002]由于H5单页应用(SPA)渲染原理(以vue项目为例):进入路由导航时,统一资源定位符(url)的更改触发路由对应的onHashChange/pushState/popState/replaceState方法,通过统一资源定位符(url)中的path路径去匹配路由配置文件中对应的路由组件,加载并实例化渲染在项目出口路由视图(router
‑
view)中。一般而言,一个应用中路由视图的渲染出口只有一个,意味着一个路由组件实例的解析渲染则意味着另外一个路由组件实例的销毁,导致在应用访问期间,即便是我们已经访问过的渲染过的路由组件,在路由导航返回时,其对应路由组件也会重新加载,重新初始化,致使组件状态丢失,用户体验不佳,有时还会重复请求网络数据造成不必要的资源浪费。
[0003]而如果使用vue
‑
router插件的keep
‑ />alive组件提本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种H5单页应用路由组件动态缓存方法,其特征在于,所述缓存方法包括:在store仓库router模块定义state状态值并赋值给keep
‑
live组件属性值;在路由记录meta配置项中添加routerPrev、routerNext及keepAlive自定义属性;在状态管理工具vuex的store仓库中定义router模块;在所述router模块的state中定义变量包括:aliveInclude,用于存储当前动态缓存着的组件名;aliveExclude,用于存储永久不被缓存着的组件名;visitedRouter,用于存储当前会话浏览历史记录;在应用入口文件App.js中定义路由视图渲染出口包裹keep
‑
alive组件,并将所述state状态值aliveInclude赋值给keep
‑
alive组件include属性值;所述state状态值aliveExclude赋值给keep
‑
alive组件exclude属性值;进行路由导航时添加预先设定的哈希hash参数。2.根据权利要求1所述的一种H5单页应用路由组件动态缓存方法,其特征在于,所述在路由记录meta配置项中添加routerPrev、routerNext及keepAlive自定义属性具体包括:在vue
‑
router库提供的路由记录配置参数meta中,开发者能够添加自定义属性;需要前进重载,后退不刷新,保留组件状态功能的路由组件对应路由记录meta元数据配置项中添加自定义属性routerPrev和/或routerNext,两者的数据类型均为数组;其中,所述routerPrev存放的是由其他路由导航跳转到对应路由导航的路由组件名称列表,而所述routerNext存放的是由对应路由导航跳转到其他路由导航的路由组件名称列表;而keepAlive属性值为布尔值,如果所述keepAlive属性值为true,代表对应路由组件在访问会话期间永久缓存。3.根据权利要求1所述的一种H5单页应用路由组件动态缓存方法,其特征在于,所述进行路由导航时添加预先设定的哈希hash参数具体包括:在使用vue
‑
router库进行路由导航跳转时,开发者自定义push函数中hash属性值,且所述hash属性值能够在vue
‑
router全局前置守卫动态修改,在使用router.push或router.replace进行路由导航跳转时,都需加上hash参数,其值为预先设定好的常量值;所述常量值包括:ROUTER_ALIVE_HASH_PUSH,用于在全局前置守卫中区分路由导航是由router.push和/或router.back跳转的,使用router.push进行路由导航跳转时,需要加上所述常量值;ROUTER_ALIVE_HASH_NO_CACHE_FROM,当开发者需要动态设置不缓存当前路由组件时...
【专利技术属性】
技术研发人员:庄树杰,
申请(专利权)人:北银金融科技有限责任公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。