[发明专利]一种基于vue实现多页面切换的方法

说明书

本发明公开了一种基于vue实现多页面切换的方法，属于计算机web开发技术领域。它包括所述多页面之间的切换采用vue缓存机制，方法步具体如下：将已经访问的页面数据放入vue缓存机制中；判断新页面是否存在于vue缓存机制中；若判断所述新页面存在于vue缓存机制中，则直接从vue缓存机制中读取；若判断所述新页面不存在于vue缓存机制中，则将所述新页面的页面数据放入vue缓存机制中；关闭应用页面。本发明避免了向服务器重复请求加载，降低了服务器的压力，也加快了页面的打开速度。

技术领域

本发明属于计算机web开发技术领域，具体地说，涉及一种基于vue实现多页面切换的方法。

背景技术

在web页面预览过程中，经常需要在多个页面之间来回切换，在网速很慢的情况下，用户每次切换页面都需要等待一段时间，影响用户体验，在页面访问人数过多的情况下，反复的请求会加大请求量，增加服务器负担。而现有的多页面切换，大多采用的是tab切换效果，通过显示和隐藏Dom的内容来实现，而这种方法的不足之处是：支持的tab页面数量较少。也有采用iframe嵌套的形式来实现多页面切换，或者采用ajax的load追加内容到指定页面区域显示，但这两种方式的页面切换，始终存在切换页面的内容重复加载的问题。

期刊《科技创新与应用》中“基于Vue.js构建单页面GIS应用的方法研究”公开了：随着单页Web应用开发技术的不断完善，越来越多的Web应用都采用了单页面应用模式。文章详细介绍了基于Vue构建单页面应用的系统架构、关键技术,并以闵行区基于航拍影片的建设用地核对项目为例,搭建了闵行区地块认定工作成果展示系统,为开发人员搭建单页面GIS应用提供了一种新的解决方案。但是该期刊的不足之处在于：只能基于Vue.js实现单页面之间的转换，无法实现多页面的转换，也不能解决多页面转换时存在的问题。

因此，多页面切换时向服务器的数据重复请求加载，和多页面间的数据传输更新是现有技术中亟需解决的技术问题。

发明内容

1、要解决的问题

针对现有多页面切换的数据反复请求加载的问题，本发明提供了一种基于vue实现多页面切换的方法。

2、技术方案

为解决上述问题，本发明采用如下的技术方案。

一种基于vue实现多页面切换的方法，所述多页面之间的切换采用vue缓存机制，方法步具体如下：

将已经访问的页面数据放入vue缓存机制中；

判断新页面是否存在于vue缓存机制中；

若判断所述新页面存在于vue缓存机制中，则直接从vue缓存机制中读取；

若判断所述新页面不存在于vue缓存机制中，则将所述新页面的页面数据放入vue缓存机制中；

根据所述页面的应用逻辑，关闭应用页面，并判断所述关闭应用页面是否为当前显示页面；

若判断所述关闭应用页面不为当前显示页面，则关闭所述应用页面，结束操作；

若判断所述关闭应用页面为当前显示页面，则查找最近一次打开的页面记录，若找到则打开最近一次的页面，若找不到，则返回至首页。

更进一步地，所述vue缓存机制具体为：

根据vue-cli脚手架工具初始化创建vue项目；

在vue项目根目录下的A文件夹中新建B文件夹和C文件夹；

在所述B文件夹中建立D文件，并在所述D文件中配置路由；

将所述路由对应的页面组件放置在所述C文件夹中。