【技术实现步骤摘要】
本专利技术涉及前端开发，尤其涉及一种动态路由多页面的缓存方法、装置及存储介质。
技术介绍
1、在基于vue和vue-router开发单页面(spa)应用时，有一类路由是带参数的动态路由匹配，比如将给定匹配模式的路由映射到同一个组件。单个组件要对应多个分化页面，通过vue-router插件的router.params api获得当前url链接上的id，通过id向后端接口请求业务数据，处理业务数据后把业务数据展示在界面上。
2、针对这种动态路由匹配，常规有两种处理方案：一种是不使用缓存，由于没有缓存，组件内部的代码逻辑在每访问一个url链接时都要执行一遍。另一种是针对组件缓存，组件内生命周期的代码仅执行一遍，但组件会额外挂载一个监听函数监听url链接的变动，变动后再次获取当前url链接上的id，通过id向后端接口请求业务数据，处理业务数据后把业务数据展示在界面上。
3、然而以上两种处理方案都无法做到针对每个文章页面都进行缓存，二次渲染页面都需要使用额外的手段，需要较多的浏览器渲染资源和网络请求资源，处理数据量大，效率低。
技术实现思路
1、本专利技术提供了一种动态路由多页面的缓存方法、装置及存储介质，以实现常规模式下动态路由单组件的多页面缓存。
2、本专利技术提供了一种动态路由多页面的缓存方法，包括：
3、响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；
4、判断所述目标路由信息是否符合动态路由的匹配规则；所述
5、若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动vue-router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。
6、进一步地，所述判断所述目标路由是否第一次访问，还包括：
7、若所述目标路由是第一次访问，则创建目标路由的路由映射，将所述路由映射添加到所述vue-router的路由表中，并跳转所述目标路由。
8、进一步地，所述创建目标路由的路由映射，具体为：
9、根据目标路由信息将对应路由页面的组件进行深复制，生成复制组件；对目标路由的全路径进行编码，生成编码结果；将所述编码结果赋值给所述复制组件的name属性；
10、创建目标路由的路由映射，将目标路由的path值和name值作为所述路由映射的path值和name值，将所述复制组件作为所述路由映射的component值，利用vue-router插件的addroute函数动态添加所述路由映射。
11、进一步地，所述跳转所述目标路由之后，还包括：
12、重新判断所述目标路由信息是否符合动态路由的匹配规则；若符合，则判断所述目标路由是否第一次访问；
13、若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则启动vue-router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。
14、进一步地，所述判断所述目标路由信息是否符合动态路由的匹配规则，具体为：
15、根据所述目标路由信息，获得目标路由的path值；
16、若所述目标路由的path值与所述动态路由的path值所定义的匹配规则时，则确定目标路由信息符合动态路由的匹配规则。
17、进一步地，所述判断所述目标路由是否第一次访问，具体为：
18、获取全局所有路由表，判断所述全局所有路由表中是否存在所述目标路由的path值对应的路由，若否，确定所述目标路由是用户第一次访问。
19、进一步地，所述启动vue-router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：
20、利用router-view组件解析动态路由映射信息，解析得到目标路由的路由信息和组件名；所述动态路由映射信息由vue-router插件记载在路由表中；所述路由信息包括：路由信息全路径；
21、将所述目标路由的组件名作为component组件的is属性，将所述目标路由的路由信息全路径作为component组件的key值，以使所述component组件将所述目标路由对应路由页面的组件进行渲染，并利用keep-alive组件将所述key值的组件信息进行缓存；
22、所述component组件部署于所述keep-alive组件中，所述keep-alive组件部署于所述router-view组件中。
23、进一步地，所述一种动态路由多页面的缓存方法，还包括：
24、执行全局前置守卫函数，以判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从vue-router的路由表中获取；若符合，则判断所述目标路由是否第一次访问；所述全局前置守卫函数部署在vue-router插件中；
25、若所述目标路由信息不符合动态路由的匹配规则，或者若所述目标路由是第一次访问，则调用全局前置守卫next函数，以启动vue-router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存。
26、作为优选方案，本专利技术通过vue-router插件的<router-view>组件和vue的内置<keep-alive>和<component>组件组成全局入口组件模版，用于在用户访问路由页面时，通过<component>组件实现该路由页面对应的组件的渲染，通过<keep-alive>组件对路由页面对应的组件进行缓存。
27、本专利技术结合vue-router插件的全局前置守卫函数的机制，在全局前置守卫函数中，若目标路由未命中动态路由且是第一次访问，则通过实时生成目标路由顶替原有动态路由的方式，能够在不修改vue-router插件源码，不重写vue的<keep-alive>组件，不侵入业务代码，不增加开发者工作量，不增加业务组件逻辑功能的情况下，实现了常规模式下动态路由单组件的多页面缓存。
28、本专利技术不仅在二次访问页面场景下适用，在页面逻辑代码复杂的情况下，多页面缓存能够非常有效的节省浏览器渲染资源，节省网络请求资源，减少后端接口压力。
29、本专利技术的其他特征和优点将在随后的具体实施方式部分予以详细说明。
30、相应地，本专利技术还提供一种动态路由多页面的缓存装置，包括：判断模块和缓存模块；
31、所述判断模块用于响应于用户对前端路由的访问操作，获取所述用户访问的目标路由信息；判断所述目标路由信息是否符合动态路由的匹配规则；所述动态路由的匹配规则从vue-router的路由表中获取；若符合，则判断所述目本文档来自技高网...
【技术保护点】
1.一种动态路由多页面的缓存方法，其特征在于，包括：
2.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由是否第一次访问，还包括：
3.如权利要求2所述的一种动态路由多页面的缓存方法，其特征在于，所述创建目标路由的路由映射，具体为：
4.如权利要求2所述的一种动态路由多页面的缓存方法，其特征在于，所述跳转所述目标路由之后，还包括：
5.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由信息是否符合动态路由的匹配规则，具体为：
6.如权利要求5所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由是否第一次访问，具体为：
7.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述启动Vue-Router插件，对所述目标路由对应路由页面的组件进行渲染，将所述目标路由的路由信息全路径进行缓存，具体为：
8.如权利要求1-7任意一项所述的一种动态路由多页面的缓存方法，其特征在于，还包括：
9.如权利要求1所述
10.一种动态路由多页面的缓存装置，其特征在于，包括：判断模块和缓存模块；
...【技术特征摘要】
1.一种动态路由多页面的缓存方法，其特征在于，包括：
2.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由是否第一次访问，还包括：
3.如权利要求2所述的一种动态路由多页面的缓存方法，其特征在于，所述创建目标路由的路由映射，具体为：
4.如权利要求2所述的一种动态路由多页面的缓存方法，其特征在于，所述跳转所述目标路由之后，还包括：
5.如权利要求1所述的一种动态路由多页面的缓存方法，其特征在于，所述判断所述目标路由信息是否符合动态路由的匹配规则，具体为：
6.如权利要求5...
【专利技术属性】
技术研发人员：庄焕滨，董红苹，谭谈，
申请(专利权)人：广州市玄武无线科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。