CN109241469A - 一种基于vue实现多页面切换的方法 - Google Patents

Abstract

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

Description

一种基于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文件夹中。

更进一步地，所述的将所述路由对应的页面组件放置在所述C文件夹中之后，还包括以下步骤：

在vue项目根目录中的项目入口文件E中引入B路由模块；

将B实例注入到vue根组件中，实现对路由的调用。

更进一步地，所述vue根组件中加入有容器，用于切换所述路由，存放所述路由对应的页面组件名称。

更进一步地，所述新页面的页面数据放入vue缓存机制之前，还包括以下步骤：

根据所述新页面对应的url确定对应的路由；

根据所述新页面的对应路由确定页面组件。

更进一步地，所述新页面的页面数据放入vue缓存机制中，具体如下：

打开新页面的页面组件；

将新页面的路由地址存入路由地址数组中；

将新页面的页面组件数据存入页面组件数据数组中。

更进一步地，所述关闭应用页面，具体如下：

关闭所述应用页面对应的路由；

在所述路由地址数组中删除所述应用页面对应的路由地址；

判断所述应用页面的页面组件数据是否存在于页面组件数据数组中；

若所述应用页面的页面组件数据存在于页面组件数据数组中，则在所述页面组件数据数组中删除所述应用页面的页面组件数据，关闭所述应用页面；

若所述应用页面的页面组件数据不存在于页面组件数据数组中，则直接关闭所述应用页面。

更进一步地，所述多页面之间的切换还包括：

所述多页面之间的数据通过vuex进行传输；

所述多页面之间的事件执行通过vuex变化进行触发。

更进一步地，所述vuex具体为：

在vue项目根目录中安装vuex模块；

在在vue项目根目录中的项目入口文件E中引入vuex模块；

创建F实例，并将F实例注入至vue根组件中。

3、有益效果

相比于现有技术，本发明的有益效果为：

(1)本发明将所有已经访问的页面数据均存放入vue缓存机制中，若新访问的页面存在于vue缓存机制中，则可直接从vue缓存机制中读取，若不存在于vue缓存机制中，则将其页面数据存放入vue缓存机制中，从而避免了向服务器重复请求加载，降低了服务器的压力，也加快了页面的打开速度；

(2)本发明的vue缓存机制中配置有与页面对应的路由以及页面组件，从而可以更快捷的进行读取，也可以更好地保存的已经访问的页面数据，避免重复请求加载；

(3)本发明通过将B路由模块引入文件E中，同时将B实例注入至vue根组件中，从而实现了对vue缓存机制中路由的调用；

(4)本发明将页面的路由地址存入路由地址数组中，将页面的路由地址存入路由地址数组中，从而将页面数据存入了vue缓存机制中，将页面与vue缓存机制进行了匹配，方便了从vue缓存机制中直接读取；

(5)本发明中的页面关闭，需要将页面对应的路由地址从路由地址数组中删除，将页面对应的页面组件数据从页面组件数据数组中删除，即将vue缓存机制中的页面信息进行删除，方便了vue缓存机制的长期使用，减少内存，也方便了页面后期的访问；

(6)本发明页面之间的数据传输以及事件执行均通过vuex实现，从而一个页面数据变化，其他页面数据也能及时发生变化，加快了页面间的数据传输更新。

附图说明

图1为本发明多页面切换的流程图；

图2为本发明页面打开/切换的流程图；

图3为本发明页面关闭的流程图。

具体实施方式

为了更加清楚地描述本发明，下面结合附图对本发明进行详细的介绍。

下面结合具体实施例对本发明进一步进行描述。

实施例1

本实施例提供了一种基于vue实现多页面切换的方法，图1是本发明实施例的多页面切换的流程图，如图1所示，该流程图包括如下步骤：

步骤1：将已经访问的页面数据存放于vue缓存机制中；

步骤2：根据新页面的页面数据判断新页面是否存在于vue缓存机制中；

步骤3：若判断新页面存在于vue缓存机制中，则直接从vue缓存机制中读取；若判断新页面不存在于vue缓存机制中，则将新页面的页面数据放入vue缓存机制中；

步骤4：根据页面的应用逻辑，关闭应用页面，并判断关闭应用页面是否为当前显示页面；

步骤5：若判断:关闭应用页面不为当前显示页面，则应用页面直接关闭，操作结束；若判断关闭应用页面为当前显示页面，则查找最近一次打开的页面记录，若找到则打开最近一次的页面，若找不到，则直接返回至首页。

根据步骤1至步骤4，实现了多页面基于vue切换的方法，可以观察到只要是需要进行访问的页面，其页面数据均需存放于vue缓存机制中，当再次打开页面时，可直接从vue缓存机制中读取，避免了重复向服务器请求加载，增大服务器的压力。

在本实施例中的vue缓存机制，根据node中的vue-cli具体进行描述：

步骤S1：根据vue-cli脚手架工具初始化创建vue项目，即在需要创建项目的文件中右键打开命令行工具，输入命令：vue init webpackdemo(项目名)，再按照提示即可完成vue项目的创建；

步骤S2：在vue项目根目录下的src文件夹中新建router文件夹和pages文件夹；

步骤S3：在router文件夹中新建index.js文件，并在index.js文件中配置路由，且配置的每个路由均对应一个组件；

多页面之间的切换就是路由之间的切换，也就是不同组件的加载。

步骤S4：将路由对应的页面组件存放在pages文件夹中；

步骤S5：在vue项目根目录下的项目入口文件main.js中引入router路由模块，并将router实例注入至vue根组件中，从而实现对router路由模块的调用；

步骤S6：在vue根组件加入一个容器，在本实施例中具体为<keep-alive:inclue＝”keepname”><router-view></router-view></keep-alive>，当router路由模块进行切换时，其对应的页面组件可以通过router-view进行加载显示；其中的keepname是一个数组，用来存放router路由模块对应的页面组件名称，通过keep-alive可以将router路由模块对应的页面组件保存在vue缓存机制中，从而防止了组件页面反复加载的现象。

实施例2

参考图2，实施例2设计的是一种基于vue实现多页面切换的方法，其基本方法步骤同实施例1，图2为页面打开/切换的流程图，其不同之处在于，该流程图包括如下步骤：

步骤SA1：确定新页面对应的统一资源定位符url；

步骤SA2：根据新页面对应的统一资源定位符url，明确统一资源定位符url对应的路由；

步骤SA3：根据统一资源定位符url对应的路由，明确路由对应的页面组件；

步骤SA4：通过router.js文件将新页面对应的统一资源定位符url、路由和页面组件进行关联，从而明确新页面所对应的路由和页面组件，方便后期使用时的直接读取；

步骤SA5：根据新页面对应的路由，判断其所对应的路由地址是否存在于vue缓存机制中的路由地址数组中，若存在于vue缓存机制中的路由地址数组中，则直接进行读取，从而加快了页面的打开速度；若不存在于vue缓存机制中的路由地址数组中，则将新页面存放于vue缓存机制中。

在本实施例中，新页面存放于vue缓存机制中的具体过程为：将新页面的页面组件打开，再将新页面的路由地址存入vue缓存机制中的路由地址数组中，同时将新页面的页面组件数据存入vue缓存机制中的页面组件数据数组中，方便对此新页面的再次读取。

实施例3

参考图3，实施例3设计的是一种基于vue实现多页面切换的方法，其基本方法步骤同实施例1，图3为页面关闭的流程图，其不同之处在于，该流程图包括如下步骤：

步骤SB1：关闭应用页面对应的路由，并从vue缓存机制中的路由地址数组中删除应用页面对应的路由地址；

步骤SB2：判断应用页面的页面组件数据是否存在于vue缓存机制中的页面组件数据数组中，若存在于vue缓存机制中的页面组件数据数组中，则将应用页面的页面组件数据从vue缓存机制中的页面组件数据数组中删除，再关闭应用页面；若不存在于vue缓存机制中的页面组件数据数组中，则直接关闭应用页面。

这是由于关闭的应用页面可能并没有进行缓存，即该应用页面每次切换时都需重新进行加载，从而应用页面关闭前都需从vue缓存机制中的路由地址数组中删除应用页面对应的路由地址。

实施例4

实施例4设计的是一种基于vue实现多页面切换的方法，其基本方法步骤同实施例1，其不同之处在于，还包括：

多页面之间的数据通过vuex进行传输，vuex主要用于管理页面组件之间的通讯，通过页面组件之间的通讯，从而实现了不同页面之间的相互通讯，相对于url或localstorage等方式实现的数据传输来说，vuex的安全性更高，页面之间的数据更新也更加迅速；

多页面之间的事件执行通过vuex变化进行触发。

在本实施例中的vuex，根据vue缓存机制具体进行描述：

步骤A1：在vue项目根目录安装vuex模块，具体的讲：在vue项目根目录中右键打开命令行工具，输入命令:npm install--save vuex指令，从而安装vuex模块；

在vue项目根目录中的项目入口文件main.js中引入vuex模块；

创建store实例，并将store实例注入至vue根组件中，可以通过调用store实例从而实现页面之间的相互联系。

以上示意性地对本发明创造及其实施方式进行了描述，该描述没有限制性，附图中所示的也只是本发明创造的实施方式之一，实际的方法并不局限于此。所以，如果本领域的普通技术人员受其启示，在不脱离本创造宗旨的情况下，不经创造性的设计出与该技术方案相似的方法方式及实施例，均应属于本专利的保护范围。

Claims (9)

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根组件中加入有容器，用于切换所述路由，存放所述路由对应的页面组件名称。

5.根据权利要求4所述的一种基于vue实现多页面切换的方法，其特征在于，所述新页面的页面数据放入vue缓存机制之前，还包括以下步骤：

根据所述新页面对应的url确定对应的路由；

根据所述新页面的对应路由确定页面组件。

6.根据权利要求4所述的一种基于vue实现多页面切换的方法，其特征在于，所述新页面的页面数据放入vue缓存机制中，具体如下：

打开新页面的页面组件；

将新页面的路由地址存入路由地址数组中；

将新页面的页面组件数据存入页面组件数据数组中。

7.根据权利要求4所述的一种基于vue实现多页面切换的方法，其特征在于，所述关闭应用页面，具体如下：

关闭所述应用页面对应的路由；

在所述路由地址数组中删除所述应用页面对应的路由地址；

判断所述应用页面的页面组件数据是否存在于页面组件数据数组中；

若所述应用页面的页面组件数据存在于页面组件数据数组中，则在所述页面组件数据数组中删除所述应用页面的页面组件数据，关闭所述应用页面；

若所述应用页面的页面组件数据不存在于页面组件数据数组中，则直接关闭所述应用页面。

8.根据权利要求4所述的一种基于vue实现多页面切换的方法，其特征在于，所述多页面之间的切换还包括：

所述多页面之间的数据通过vuex进行传输；

所述多页面之间的事件执行通过vuex变化进行触发。

9.根据权利要求8所述的一种基于vue实现多页面切换的方法，其特征在于，所述vuex具体为：

在vue项目根目录中安装vuex模块；

在在vue项目根目录中的项目入口文件E中引入vuex模块；

创建F实例，并将F实例注入至vue根组件中。