CN117579549B - 一种动态路由多页面的缓存方法和装置 - Google Patents

Abstract

本发明公开了一种动态路由多页面的缓存方法和装置，方法包括：响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue‑Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue‑Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，以实现常规模式下动态路由单组件的多页面缓存。

Description

一种动态路由多页面的缓存方法和装置

技术领域

本发明涉及前端开发技术领域，尤其涉及一种动态路由多页面的缓存方法、装置及存储介质。

背景技术

在基于Vue和Vue-Router开发单页面(SPA)应用时，有一类路由是带参数的动态路由匹配，比如将给定匹配模式的路由映射到同一个组件。单个组件要对应多个分化页面，通过Vue-Router插件的router.params API获得当前URL链接上的id，通过id向后端接口请求业务数据，处理业务数据后把业务数据展示在界面上。

针对这种动态路由匹配，常规有两种处理方案：一种是不使用缓存，由于没有缓存，组件内部的代码逻辑在每访问一个URL链接时都要执行一遍。另一种是针对组件缓存，组件内生命周期的代码仅执行一遍，但组件会额外挂载一个监听函数监听URL链接的变动，变动后再次获取当前URL链接上的id，通过id向后端接口请求业务数据，处理业务数据后把业务数据展示在界面上。

然而以上两种处理方案都无法做到针对每个文章页面都进行缓存，二次渲染页面都需要使用额外的手段，需要较多的浏览器渲染资源和网络请求资源，处理数据量大，效率低。

发明内容

本发明提供了一种动态路由多页面的缓存方法、装置及存储介质，以实现常规模式下动态路由单组件的多页面缓存。

本发明提供了一种动态路由多页面的缓存方法，包括：

响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；

判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

进一步地，所述判断所述目标路由是否第一次访问，还包括：

若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由。

进一步地，所述创建目标路由的路由映射，具体为：

根据目标路由信息将对应路由页面的组件进行深复制，生成复制组件；对目标路由的全路径进行编码，生成编码结果；将所述编码结果赋值给所述复制组件的name属性；

创建目标路由的路由映射，将目标路由的path值和name值作为所述路由映射的path值和name值，将所述复制组件作为所述路由映射的component值，利用Vue-Router插件的addRoute函数动态添加所述路由映射。

进一步地，所述跳转所述目标路由之后，还包括：

重新判断所述目标路由信息是否符合动态路由的匹配规则；若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

进一步地，所述判断所述目标路由信息是否符合动态路由的匹配规则，具体为：

根据所述目标路由信息，获得目标路由的path值；

若所述目标路由的path值与所述动态路由的path值相同时，则确定目标路由信息符合动态路由的匹配规则。

进一步地，所述判断所述目标路由是否第一次访问，具体为：

获取全局所有路由表，判断所述全局所有路由表中是否存在所述目标路由的path值对应的路由，若否，确定所述目标路由是用户第一次访问。

进一步地，所述启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：

利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由Vue-Router插件记载在路由表中；所述路由信息包括：路由信息全路径；

将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；

所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中。

进一步地，所述一种动态路由多页面的缓存方法，还包括：

执行全局前置守卫函数，以判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；所述全局前置守卫函数部署在Vue-Router插件中；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则调用全局前置守卫next函数，以启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

作为优选方案，本发明通过Vue-Router插件的<router-view>组件和Vue的内置<keep-alive>和<component>组件组成全局入口组件模版，用于在用户访问路由页面时，通过<component>组件实现该路由页面对应的组件的渲染，通过<keep-alive>组件对路由页面对应的组件进行缓存。

本发明结合Vue-Router插件的全局前置守卫函数的机制，在全局前置守卫函数中，若目标路由未命中动态路由且是第一次访问，则通过实时生成目标路由顶替原有动态路由的方式，能够在不修改Vue-Router插件源码，不重写Vue的<keep-alive>组件，不侵入业务代码，不增加开发者工作量，不增加业务组件逻辑功能的情况下，实现了常规模式下动态路由单组件的多页面缓存。

本发明不仅在二次访问页面场景下适用，在页面逻辑代码复杂的情况下，多页面缓存能够非常有效的节省浏览器渲染资源，节省网络请求资源，减少后端接口压力。

本发明的其他特征和优点将在随后的具体实施方式部分予以详细说明。

相应地，本发明还提供一种动态路由多页面的缓存装置，包括：判断模块和缓存模块；

所述判断模块用于响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

所述缓存模块用于若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

相应地，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序；其中，所述计算机程序在运行时控制所述计算机可读存储介质所在的设备执行如本发明内容所述的一种动态路由多页面的缓存方法。

附图说明

图1是本发明提供的动态路由多页面的缓存方法的一种实施例的流程示意图；

图2是本发明提供的动态路由多页面的缓存装置的一种实施例的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

单页面(SPA)应用：单页面(SPA)应用，英文全称是single-page-application，简称为SPA，是一种网页应用程序模型。SPA将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS，一旦页面加载完成，用户切换页面的操作不会重新加载页面或跳转，取而代之的是利用JavaScript动态的变换HTML内容，从而实现UI与用户的交互，由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。

Vue-Router插件：Vue官方提供一个路由管理插件，包含了路由/视图表、基于组件的路由配置、路由参数查询，全局路由钩子等核心能力。在使用Vue进行网页开发时，一般采用该插件来进行路由管理，以便快速搭建一个单页面(SPA)应用。

<keep-alive>组件：Vue框架提供的一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

<component>组件：Vue框架提供的一个内置组件，一个用于渲染动态组件或元素的“元组件”，可通过"is"属性传递组件名称进行渲染。

本发明实施例利用一个文章详情页Article组件作为举例，文章详情页Article组件可以针对应用中所有文章页面进行渲染，一个URL链接代表一篇文章，每篇文章的id不同。在Vue-Router插件中，在路径path中使用一个动态字段来表示不同的文章：route.path="/article/:id"。假设访问的URL链接为http://localhost:8080/#/article/123，表示访问id=123的文章，以此类推，id=123可换成其他的文章id，代表访问另外的文章。该组件的代码逻辑为：通过Vue-Router插件的router.params API获得当前URL链接上的id，通过id向后端接口请求业务数据，处理业务数据，把业务数据展示在界面上。

实施例一

请参照图1，为本发明实施例提供的一种动态路由多页面的缓存方法，包括步骤S101-S103：

步骤S101：响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；

步骤S102：判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

步骤S103：若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

进一步地，启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：

利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由Vue-Router插件记载在路由表中；所述路由信息包括：路由信息全路径；

将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；

所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中。

在本实施例中，在Vue应用入口文件main.js中启用Vue-Router插件，并初始化Vue-Router的路由表。Vue-Router的路由表用于添加路由页面的动态路由映射，包括：动态路由映射对象的path值，name值和component值；其中，component值为对应的路由页面的组件；

示例性地，一个支持动态路由的vue组件，比如文章详情页：article.vue，在Vue-Router路由表中添加文章详情页的动态路由映射，该动态路由映射对象的path值为"/article/:id"，name值为"article"，component值为对应的文章详情页article.vue组件。通过动态路由映射将动态路由与vue组件对应匹配起来，以实现当用户访问某个文章详情页链接时，渲染路由视图，执行article.vue组件代码。

在本实施例中，在Vue应用入口文件App.vue中定义组件模板，模版中定义由Vue-Router插件提供的<router-view>组件，<router-view>组件通过解析Vue-Router的路由表中的动态路由映射信息，得到当前URL所对应的路由信息和组件名。示例性地，<router-view>组件中使用v-slot API获取当前路由信息"route"对象，以及渲染当前页面路由的组件名"component"。

在<router-view>组件中放置Vue的内置<keep-alive>组件，在<keep-alive>组件中放置Vue的内置<component>组件。

<router-view>组件把组件名和路由信息全路由“router.fullPath”传入<component>组件中，组件名对应的是<component>组件的is属性，“router.fullPath”对应的是<component>组件的key值，传入这两个值后，<component>组件会解析渲染当前URL所对应的组件。

由于<component>组件在<keep-alive>组件中，<keep-alive>组件会基于<component>组件当前的渲染情况，缓存对应key值的组件信息。

当用户访问某个路由页面时，设置<component>组件的关联is属性为页面路由的组件名"component"，同时设置<component>组件的key值为页面路由的信息全路径"route.fullPath"，以实现把该路由页面对应的组件缓存起来，并将其缓存的key值设置为路由信息全路径。

进一步地，执行全局前置守卫函数，以判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；所述全局前置守卫函数部署在Vue-Router插件中；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则调用全局前置守卫next函数，以启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

在本实施例中，定义Vue-Router的全局前置守卫router.beforeEach的函数，所述全局前置守卫router.beforeEach的函数用于判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

当触发所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问时，调用全局前置守卫next函数，所述全局前置守卫next函数用于启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

进一步地，判断所述目标路由信息是否符合动态路由的匹配规则，具体为：

根据所述目标路由信息，获得目标路由的path值；

若所述目标路由的path值与所述动态路由的path值相同时，则确定目标路由信息符合动态路由的匹配规则。

在本实施例中，获取即将要进入路由导航的目标路由信息，将目标路由记为toRoute，判断toRoute的path值是否为动态路由path值；动态路由中的path值代表的是动态路由的URL匹配规则，假如动态路由path值为“/article/:id”，该path值表示URL必须有“/article/”加上任意文章id结尾，才算符合URL匹配规则，则为命中文章详情页。

若toRoute的path值为动态路由path值，则toRoute的path值符合动态路由的path值所定义的匹配规则，说明路由已命中文章详情页；若toRoute的path值不为动态路由path值，则toRoute的path值不符合动态路由的path值所定义的匹配规则，说明路由命中的是其他页面。

进一步地，判断所述目标路由是否第一次访问，具体为：

获取全局所有路由表，判断所述全局所有路由表中是否存在所述目标路由的path值对应的路由，若否，确定所述目标路由是用户第一次访问。

在本实施例中，获取全局所有路由表记为allRoutes，判断全局所有路由表allRoutes中有没有toRoute.fullPath（目标路由的全路径）对应的路由，如果没有，说明该toRoute路由是用户第一次访问，如果有，说明该toRoute路由非第一次访问。

进一步地，判断所述目标路由是否第一次访问，还包括：

若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由。

进一步地，创建目标路由的路由映射，具体为：

根据目标路由信息将对应路由页面的组件进行深复制，生成复制组件；对目标路由的全路径进行编码，生成编码结果；将所述编码结果赋值给所述复制组件的name属性；

创建目标路由的路由映射，将目标路由的path值和name值作为所述路由映射的path值和name值，将所述复制组件作为所述路由映射的component值，利用Vue-Router插件的addRoute函数动态添加所述路由映射。

进一步地，跳转所述目标路由之后，还包括：

重新判断所述目标路由信息是否符合动态路由的匹配规则；若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

在本实施例中，若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由，具体为：

引入文章详情页：article.vue，深复制article.vue组件(与原组件切割，断开引用)，记为copyArticleComponent，同时，对toRoute全路径fullPath进行encodeURIComponent编码，并将编码结果赋值给copyArticleComponent的name属性。之所以要对fullPath进行encodeURIComponent编码，是因为如果fullPath中有英文逗号，会影响keepAliveExcludeNames的清除缓存机制。

新增一个新的路由映射，记为newRoute，设置newRoute的path值和name值为toRoute.fullPath，component值为copyArticleComponent，接着利用Vue-Router的addRoute函数动态添加这个新路由映射，最后跳转到该新路由。

在本实施例中，新的路由映射为一个全新的专属于toRoute的独立路由映射，顶替原有的文章详情页动态路由（原路由），由于新的路由映射newRoute.path、newRoute.name和newRoute.component均与原路由不同，使得<keep-alive>组件识别单个文章详情页皆认为是新的组件，从而实现能够分别缓存不同的文章详情页组件，而这些文章详情页组件的缓存同时存在于<keep-alive>组件中。正常渲染路由视图之后，由于在App.vue配置的组件模板的效果，生成基于单个文章详情页的缓存。

进一步地，所述动态路由多页面的缓存方法，还包括：响应于用户的页面后退的操作，获取页面后退时的event信息，根据所述event信息，获得前一个页面的全路径信息；对所述全路径信息进行编码，将编码后的全路径信息发送到响应式对象数组，以清除所述前一个页面的缓存；等待下一次DOM更新后，清空所述响应式对象数组。

在本实施例中，可选的，利用Vue3的组合式API创建响应式ref对象，命名为keepAliveExcludeNames，默认值为空数组，并把该响应式对象赋给<keep-alive>组件的exclude属性。其作用是当有需要时（比如后退时）可对keepAliveExcludeNames赋值需要清除缓存的组件名，从而清除<keep-alive>组件中被指定的页面缓存，清除完成后，移除组件名恢复空数组状态。

当用户进行页面后退时，通过window.addEventListener('popstate')监听浏览器后退行为，执行以下步骤：获取后退时的event信息，从event信息中得到后退前一个页面的信息event.state.forward，event.state.forward也等于后退前页面的全路径fullPath，对event.state.forward进行encodeURIComponent编码，将编码结果push到keepAliveExcludeNames响应式对象数组，从而清除前页面的缓存，接着执行Vue.nextTick()，等待下一次DOM更新之后，清空keepAliveExcludeNames响应式对象数组。

通过以上操作实现了“前进缓存，后退清除缓存”的效果，在针对手机端H5的单页应用上有非常实用的效果。

实施本发明实施例，具有如下效果：

本发明通过Vue-Router插件的<router-view>组件和Vue的内置<keep-alive>和<component>组件组成全局入口组件模版，用于在用户访问路由页面时，通过<component>组件实现该路由页面对应的组件的渲染，通过<keep-alive>组件对路由页面对应的组件进行缓存。

本发明结合Vue-Router插件的全局前置守卫函数的机制，在全局前置守卫函数中，若目标路由未命中动态路由且是第一次访问，则通过实时生成目标路由顶替原有动态路由的方式，能够在不修改Vue-Router插件源码，不重写Vue的<keep-alive>组件，不侵入业务代码，不增加开发者工作量，不增加业务组件逻辑功能的情况下，实现了常规模式下动态路由单组件的多页面缓存。

本发明不仅在二次访问页面场景下适用，在页面逻辑代码复杂的情况下，多页面缓存能够非常有效的节省浏览器渲染资源，节省网络请求资源，减少后端接口压力。

本发明配置简单，同时也支持扩展能力，比如可扩展“前进缓存，后退清除缓存”能力，或者开发者可基于本发明核心根据自身业务需求扩展其他能力，等等。

实施例二

请参照图2，为本发明实施例提供的一种动态路由多页面的缓存装置，包括：判断模块201和缓存模块202；

所述判断模块用于响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

在本实施例中，判断模块包括规则判断单元和访问判断单元；

规则判断单元用于根据所述目标路由信息，获得目标路由的path值；

若所述目标路由的path值与所述动态路由的path值相同时，则确定目标路由信息符合动态路由的匹配规则。

访问判断单元用于获取全局所有路由表，判断所述全局所有路由表中是否存在所述目标路由的path值对应的路由，若否，确定所述目标路由是用户第一次访问。

所述缓存模块用于若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

所述动态路由多页面的缓存装置还包括：创建模块；

所述创建模块用于若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由。

在本实施例中，所述创建目标路由的路由映射，具体为：

根据目标路由信息将对应路由页面的组件进行深复制，生成复制组件；对目标路由的全路径进行编码，生成编码结果；将所述编码结果赋值给所述复制组件的name属性；

创建目标路由的路由映射，将目标路由的path值和name值作为所述路由映射的path值和name值，将所述复制组件作为所述路由映射的component值，利用Vue-Router插件的addRoute函数动态添加所述路由映射。

在本实施例中，跳转所述目标路由之后，还包括：

重新判断所述目标路由信息是否符合动态路由的匹配规则；若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

在本实施例中，启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：

利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由Vue-Router插件记载在路由表中；所述路由信息包括：路由信息全路径；

将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；

所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中。

所述动态路由多页面的缓存装置还包括：后退模块；

后退模块用于响应于用户的页面后退的操作，获取页面后退时的event信息，根据所述event信息，获得前一个页面的全路径信息；对所述全路径信息进行编码，将编码后的全路径信息发送到响应式对象数组，以清除所述前一个页面的缓存；等待下一次DOM更新后，清空所述响应式对象数组。

上述的动态路由多页面的缓存装置可实施上述方法实施例的动态路由多页面的缓存方法。上述方法实施例中的可选项也适用于本实施例，这里不再详述。本申请实施例的其余内容可参照上述方法实施例的内容，在本实施例中，不再进行赘述。

实施例三

相应地，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上任意一项实施例所述的动态路由多页面的缓存方法。

示例性的，所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器中，并由所述处理器执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述终端设备中的执行过程。

所述终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备可包括，但不仅限于，处理器、存储器。

所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分。

所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现终端设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据移动终端的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡（Smart Media Card, SMC），安全数字（SecureDigital, SD）卡，闪存卡（Flash Card）、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

其中，所述终端设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、电载波信号、电信信号以及软件分发介质等。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步的详细说明，应当理解，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围。特别指出，对于本领域技术人员来说，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种动态路由多页面的缓存方法，其特征在于，包括：

响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；

判断所述目标路由信息是否符合动态路由的匹配规则，具体为：

根据所述目标路由信息，获得目标路由的path值；

若所述目标路由的path值与所述动态路由的path值相同时，则确定目标路由信息符合动态路由的匹配规则；

所述动态路由的匹配规则从Vue-Router的路由表中获取；

若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存；

所述启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：

利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由Vue-Router插件记载在路由表中；所述路由信息包括：路由信息全路径；

将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；

所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中；

若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由。

2.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述创建目标路由的路由映射，具体为：

根据目标路由信息将对应路由页面的组件进行深复制，生成复制组件；对目标路由的全路径进行编码，生成编码结果；将所述编码结果赋值给所述复制组件的name属性；

创建目标路由的路由映射，将目标路由的path值和name值作为所述路由映射的path值和name值，将所述复制组件作为所述路由映射的component值，利用Vue-Router插件的addRoute函数动态添加所述路由映射。

3.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述跳转所述目标路由之后，还包括：

重新判断所述目标路由信息是否符合动态路由的匹配规则；若符合，则判断所述目标路由是否第一次访问；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

4.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由是否第一次访问，具体为：

获取全局所有路由表，判断所述全局所有路由表中是否存在所述目标路由的path值对应的路由，若否，确定所述目标路由是用户第一次访问。

5.如权利要求1-4任意一项所述的一种动态路由多页面的缓存方法，其特征在于，还包括：

执行全局前置守卫函数，以判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；所述全局前置守卫函数部署在Vue-Router插件中；

若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则调用全局前置守卫next函数，以启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。

6.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，还包括：

响应于用户的页面后退的操作，获取页面后退时的event信息，根据所述event信息，获得前一个页面的全路径信息；对所述全路径信息进行编码，将编码后的全路径信息发送到响应式对象数组，以清除所述前一个页面的缓存；等待下一次DOM更新后，清空所述响应式对象数组。

7.一种动态路由多页面的缓存装置，其特征在于，包括：判断模块和缓存模块；

所述判断模块用于响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从Vue-Router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；

判断模块包括规则判断单元；

规则判断单元用于根据所述目标路由信息，获得目标路由的path值；

若所述目标路由的path值与所述动态路由的path值相同时，则确定目标路由信息符合动态路由的匹配规则；

所述缓存模块用于若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存；

所述启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：

利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由Vue-Router插件记载在路由表中；所述路由信息包括：路由信息全路径；

将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；

所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中；

所述动态路由多页面的缓存装置还包括：创建模块；

所述创建模块用于若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述Vue-Router的路由表中，并跳转所述目标路由。