一种基于vue实现多页面切换的方法技术

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

【技术实现步骤摘要】
一种基于vue实现多页面切换的方法
本专利技术属于计算机web开发
，具体地说，涉及一种基于vue实现多页面切换的方法。
技术介绍
在web页面预览过程中，经常需要在多个页面之间来回切换，在网速很慢的情况下，用户每次切换页面都需要等待一段时间，影响用户体验，在页面访问人数过多的情况下，反复的请求会加大请求量，增加服务器负担。而现有的多页面切换，大多采用的是tab切换效果，通过显示和隐藏Dom的内容来实现，而这种方法的不足之处是：支持的tab页面数量较少。也有采用iframe嵌套的形式来实现多页面切换，或者采用ajax的load追加内容到指定页面区域显示，但这两种方式的页面切换，始终存在切换页面的内容重复加载的问题。期刊《科技创新与应用》中“基于Vue.js构建单页面GIS应用的方法研究”公开了：随着单页Web应用开发技术的不断完善，越来越多的Web应用都采用了单页面应用模式。文章详细介绍了基于Vue构建单页面应用的系统架构、关键技术,并以闵行区基于航拍影片的建设用地核对项目为例,搭建了闵行区地块认定工作成果展示系统,为开发人员搭建单页面GIS应用提供了一种新的解决方案。但是该期本文档来自技高网...

【技术保护点】
1.一种基于vue实现多页面切换的方法，其特征在于，所述多页面之间的切换采用vue缓存机制，方法步具体如下：将已经访问的页面数据放入vue缓存机制中；判断新页面是否存在于vue缓存机制中；若判断所述新页面存在于vue缓存机制中，则直接从vue缓存机制中读取；若判断所述新页面不存在于vue缓存机制中，则将所述新页面的页面数据放入vue缓存机制中；根据所述页面的应用逻辑，关闭应用页面，并判断所述关闭应用页面是否为当前显示页面；若判断所述关闭应用页面不为当前显示页面，则关闭所述应用页面，结束操作；若判断所述关闭应用页面为当前显示页面，则查找最近一次打开的页面记录，若找到则打开最近一次的页面，若找不到...

【技术特征摘要】
1.一种基于vue实现多页面切换的方法，其特征在于，所述多页面之间的切换采用vue缓存机制，方法步具体如下：将已经访问的页面数据放入vue缓存机制中；判断新页面是否存在于vue缓存机制中；若判断所述新页面存在于vue缓存机制中，则直接从vue缓存机制中读取；若判断所述新页面不存在于vue缓存机制中，则将所述新页面的页面数据放入vue缓存机制中；根据所述页面的应用逻辑，关闭应用页面，并判断所述关闭应用页面是否为当前显示页面；若判断所述关闭应用页面不为当前显示页面，则关闭所述应用页面，结束操作；若判断所述关闭应用页面为当前显示页面，则查找最近一次打开的页面记录，若找到则打开最近一次的页面，若找不到，则返回至首页。2.根据权利要求1所述的一种基于vue实现多页面切换的方法，其特征在于，所述vue缓存机制具体为：根据vue-cli脚手架工具初始化创建vue项目；在vue项目根目录下的A文件夹中新建B文件夹和C文件夹；在所述B文件夹中建立D文件，并在所述D文件中配置路由；将所述路由对应的页面组件放置在所述C文件夹中。3.根据权利要求2所述的一种基于vue实现多页面切换的方法，其特征在于，所述的将所述路由对应的页面组件放置在所述C文件夹中之后，还包括以下步骤：在vue项目根目录中的项目入口文件E中引入B路由模块；将B实例注入到vue根组件中，实现对路由的调用。4.根据权利要求3所述的一种基于vue实现多页面切换的方法，其特征在于，所述vue根组件中加入有容器，用于切换所述路由，存放所述路由对应的页面组件名称...

【专利技术属性】
技术研发人员：余忠争，李鑫，甘松云，
申请(专利权)人：安徽智恒信科技有限公司，
类型：发明
国别省市：安徽,34