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

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根组件中。