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

权利要求书

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参数；

在使用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，当开发者需要动态设置不缓存当前路由组件时，则拼接在所述ROUTER_ALIVE_HASH_PUSH后面；

ROUTER_ALIVE_HASH_PUSH_REPLACE，当开发者使用router.push方法且设置replace值为true时或直接router.replace方法进行路由导航，以替换当前路由记录时，则拼接在所述ROUTER_ALIVE_HASH_PUSH后面。

2.根据权利要求1所述的一种H5单页应用路由组件动态缓存方法，其特征在于，所述在路由记录meta配置项中添加routerPrev、routerNext及keepAlive自定义属性具体包括：

在vue-router库提供的路由记录配置参数meta中，开发者能够添加自定义属性；

需要前进重载，后退不刷新，保留组件状态功能的路由组件对应路由记录meta元数据配置项中添加自定义属性routerPrev或routerNext，两者的数据类型均为数组；

其中，所述routerPrev存放的是由其他路由导航跳转到对应路由导航的路由组件名称列表，而所述routerNext存放的是由对应路由导航跳转到其他路由导航的路由组件名称列表；

而keepAlive属性值为布尔值，如果所述keepAlive属性值为true，代表对应路由组件在访问会话期间永久缓存。

3.根据权利要求1所述的一种H5单页应用路由组件动态缓存方法，其特征在于，当进入路由导航时，会触发在vue-router库的全局前置守卫router.beforeEach的函数执行具体包括：

步骤100：当进入路由导航时，先判断当前路由名称是否包含在aliveExclude状态值中，如果包含，直接执行步骤600，如果不包含，执行步骤200；

步骤200：首先将判定是否路由返回判断参数isRouterBack置为默认值false，然后执行判断，如果即将跳转的路由组件名称不在浏览历史记录visitedRouter中，压入浏览历史记录visitedRouter栈顶，否则，继续执行步骤300；

步骤300：判断当前浏览历史记录visitedRouter所存储的数量是否大于1，如果不大于1，执行步骤400，如果大于1，再继续执行判断，当前路由组件名称是否为visitedRouter最后一个值且即将跳转的路由组件名称在visitedRouter中且不等于倒数第二个值；

如果条件不满足，执行步骤400，如果条件满足，则判定为路由跳转返回，将visitedRouter中从即将跳转的路由组件名称位置之后的所有访问记录删除，同时清除aliveInclude状态值中最后一个to.name位置之后的路由组件名称；并调用router.go函数进行路由跳转返回，其中backLength为跳转层级；

步骤400：先判断对于即将跳转的路由中是否有routerPrev配置且当前路由名称是否包含在routerPrev的值中，如果条件不满足，执行步骤500，如果条件满足，则判断当前路由名称是否已经包含在aliveInclude状态值中，如果包含，则先将当前路由名称从aliveInclude状态值中删除；

再将当前路由名称压入aliveInclude栈顶，以更新缓存位置，如果不包含，则直接将当前路由名称压入aliveInclude栈顶，对from所在的路由组件进行缓存；接着再执行步骤500；

步骤500：再判断对于即将跳转的路由中是否有routerNext配置且当前路由名称是否包含在routerNext的值中，如果条件不满足，执行步骤600，如果条件满足，则判断当前路由名称是否已经包含在aliveInclude状态值中，如果包含，则先将当前路由名称从aliveInclude状态值中删除，清除所在的路由组件缓存，再执行步骤600，如果不包含，直接执行步骤600；

步骤600：调用vue-router全局前置守卫next函数，继续执行后续路由逻辑。