基于双向导航组件的页面生成方法、系统、存储介质及计算机设备

技术领域

本发明涉及软件技术领域，具体为基于双向导航组件的页面生成方法、系统、存储介质及计算机设备。

背景技术

菜单组件是后台系统管理系统的必要组件之一，其应用的程度达到90％以上。

Vue.js是一套用于构建用户界面的渐进式框架，它可以自底向上逐层应用，目前在国内被广泛使用。它是基于MVVM框架做开发的，MVVM是前端开发中一种很有影响力的模式，实现了响应式的双向数据绑定，它的底层提供了很多实用的API，减少了实现页面功能很多繁琐的操作，可以快速地构建系统网站。与Vue.js框架较常配套使用的是iView组件库，iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品，有丰富常见的组件供开发人员使用。基于iView组件库提供的菜单组件，是整套提供，易于二次开发，为开发人员提高了工作效率；Tab标签组件用选项卡形式来展示导航，比较美观；面包屑组件可以显示目前的页面导航位置，为开发人员提高了工作效率之余还给用户很好的用户体验。

目前基于Vue基础的iView组件库提供的菜单组件虽然可以快速帮助开发人员渲染出完整的菜单，但是当客户方的原型设计稿上要求在常规页面的侧边导航上增设Tab导航，希望可以记录打开的历史页面(即类似于浏览器的选项卡功能)时，现有的iView组件库并不能实现客户方对产品的这一需求。而如果开发人员直接将Tab标签组件与菜单组件合并为新的导航组件，那么将会面临菜单组件、面包屑组件以及Tab标签组件之间存在缺少联系的问题，即三者之间无法进行关联，在刷新或点击新菜单页面时，面包屑组件和Tab标签组件容易出现数据更新延迟的问题。

发明内容

本发明构建了基于Vue框架和iView UI实现的带面包屑位置的双向导航组件，提出基于双向导航组件的页面生成方法、系统、存储介质及计算机设备，解决了Tab标签组件、菜单组件及面包屑位置组件无法关联而导致刷新或点击新菜单页面时，而出现数据更新延迟的技术问题，为开发人员提供了极大的便利，提高了开发人员的工作效率。

本发明的页面生成方法采用如下技术方案：基于双向导航组件的页面生成方法，包括以下步骤：

S1、设立菜单子组件、Tab标签子组件以及面包屑子组件作为双向导航组件；利用Vuex预先设立公共变量，建立起菜单子组件、Tab标签子组件以及面包屑子组件之间的通讯；

S2、通过菜单子组件显示出当前菜单的状态，监听页面路由改变时跳转路由的信息，利用Vuex将所监听的信息存储到公共变量，记录每次跳转路由时被改变了的路由信息，把当前的路由信息记录为面包屑子组件渲染的依据，把当前的路由信息和已打开的路由信息记录为Tab标签子组件渲染的依据；

S3、通过Tab标签子组件显示出当前打开的标签页和已打开的标签页，获取公共变量，并根据公共变量的数据进行渲染；监听Tab标签点击事件，设置在点击Tab标签后跳转到对应的路由，并绑定当前菜单状态，设置当前菜单状态的样式；实时记录改变后的路由信息和已打开标签页信息，并存进公共变量；

S4、通过面包屑子组件显示页面的路由层级结构，实时将当前的路由信息存进公共变量，并更新位置信息；

S5、菜单子组件、面包屑子组件和Tab标签子组件共同渲染，形成系统页面。

本发明的页面生成系统采用如下技术方案：基于双向导航组件的页面生成系统，包括：

双向导航组件设立模块，用于设立菜单子组件、Tab标签子组件以及面包屑子组件作为双向导航组件；并利用Vuex预先设立公共变量，建立起菜单子组件、Tab标签子组件以及面包屑子组件之间的通讯；

其中，菜单子组件与Tab标签子组件形成对应关系，清晰直观的显示出当前菜单的状态；当侧边菜单子组件、Tab标签子组件或面包屑子组件发生变化时，通过公共变量更新三个子组件各自的状态；

通过菜单子组件显示出当前菜单的状态，监听页面路由改变时跳转路由的信息，利用Vuex将所监听的信息存储到公共变量，记录每次跳转路由时被改变了的路由信息，把当前的路由信息记录为面包屑子组件渲染的依据，把当前的路由信息和已打开的路由信息记录为Tab标签子组件渲染的依据；

通过Tab标签子组件显示出当前打开的标签页和已打开的标签页，获取公共变量，并根据公共变量的数据进行渲染；监听Tab标签点击事件，设置在点击Tab标签后跳转到对应的路由，并绑定当前菜单状态，设置当前菜单状态的样式；实时记录改变后的路由信息和已打开标签页信息，并存进公共变量；

通过面包屑子组件显示页面的路由层级结构，实时将当前的路由信息存进公共变量，并更新位置信息；

渲染模块，通过菜单子组件、面包屑子组件和Tab标签子组件共同渲染，形成系统页面。

本发明的存储介质，其上存储有计算机指令，所述计算机指令被处理器执行时，实现上述页面生成方法的步骤。

本发明的计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器运行所述计算机程序时，执行上述页面生成方法的步骤。

与现有技术相比，本发明的有益效果包括：

本发明首先构建基于Vue框架和iView UI的Tab标签组件、Menu菜单组件以及Breadcrumb面包屑组件实现的双向导航组件，该双向导航组件包括侧边菜单子组件、Tab标签子组件和面包屑子组件，其中菜单子组件和面包屑子组件相互呼应，可以相互控制当前页面路由，而Tab标签子组件可以实现多个页面标签同时打开，同时利用Vuex技术作缓存机制，跳转路由时直接读取缓存，加快了新页面打开的速度，避免了数据更新延迟的情形，极大地简化了开发逻辑，优化了用户体验。

附图说明

图1为本发明实施例中双向导航组件的架构示意图；

图2为本发明实施例中基于双向导航组件生成页面的流程图；

图3为本发明实施例中设计好的系统页面示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例

如图1-3所示，在本实施例中，基于双向导航组件的页面生成方法包括以下步骤：

S1、设立侧边菜单子组件、Tab标签子组件以及面包屑子组件作为双向导航组件；利用Vuex预先设立公共变量，建立起侧边菜单子组件、Tab标签子组件以及面包屑子组件之间的通讯。

公共变量在双导航组件中是建立侧边菜单子组件、Tab标签子组件以及面包屑子组件通讯的桥梁；菜单子组件可以位于系统页面的侧边，面包屑子组件则位于系统页面的上边。利用Vuex预先设立需要的公共变量，当侧边菜单子组件、Tab标签子组件或面包屑子组件发生变化时，通过公共变量可以快速地更新三个子组件各自的状态。

S2、通过侧边菜单子组件显示出当前菜单的状态，监听页面路由改变时跳转路由的信息，利用Vuex将所监听的信息存储到公共变量，记录每次跳转路由时被改变了的路由信息，把当前的路由信息记录为面包屑子组件渲染的依据，把当前的路由信息和已打开的路由信息记录为Tab标签子组件渲染的依据。

侧边菜单子组件，是双导航组件的主要组成部分，作用是可以与Tab标签子组件形成对应关系，清晰直观的显示出当前菜单的状态。主要是在引入iView UI的Menu菜单子组件后，使用javascript语言进行二次开发，根据接口提供的动态数据进行渲染。

本实施例通过设置一个监听方法，监听每当页面路由改变时跳转路由的信息，在侧边菜单子组件内利用Vuex将所监听的信息存储到公共变量，同时利用Vue中的computed计算属性，实时记录每次跳转路由时被改变了的路由信息，并把当前的路由信息记录为面包屑子组件渲染的依据，把已打开的路由信息记录为Tab标签子组件渲染的依据。

本步骤具体执行的步骤如下：

①引入iView的Menu组件，把接口获取的数据传入Menu组件，循环子菜单渲染出侧边菜单子组件。

②使用Vuex配置引入公共变量，并与侧边菜单子组件的当前状态和菜单数据进行双向绑定。

③使用Javascript编写监听的方法，利用Vue的computed计算属性实时计算获取当前页面路由改变时跳转路由的信息，实时把Tab标签子组件在改变时传入的公共变量更新到侧边菜单子组件的路由状态上。

④在监听跳转路由信息的过程中，编写跳转路由后的逻辑，将跳转路由的信息存储在公共变量中，为渲染和实时更新面包屑子组件和Tab标签子组件的状态做准备。

S3、通过Tab标签子组件显示出当前打开的标签页和已打开的标签页，获取公共变量，并根据公共变量的数据进行渲染。监听Tab标签点击事件，设置在点击Tab标签后跳转到对应的路由，并绑定当前菜单状态，设置当前菜单状态的样式；实时记录改变后的路由信息和已打开标签页信息，并存进公共变量。

在本发明中，Tab标签子组件是双导航组件的主要组成部分，作用是可以与侧边菜单子组件形成对应关系，清晰直观的显示出当前打开标签页和已打开的标签页。主要是在引入iView UI的Tab标签子组件后使用javascript语言进行二次开发，根据Vuex存储的公共变量的数据进行渲染，如果页面为初始化没有公共变量，则使用默认数据标签。设置一个监听方法，监听Tab标签点击事件，设置在点击Tab标签后跳转到对应的路由，并绑定当前菜单状态，设置当前菜单状态的样式。在Tab标签子组件内利用Vuex存储的公共变量，同时利用Vue中的computed计算属性，实时记录改变后的路由信息和已打开标签页信息，并存进公共变量。

本步骤具体执行的步骤如下：

①使用Vuex配置引入公共变量，并与侧边菜单子组件的当前状态和菜单数据进行双向绑定。

②引入iView的Tab标签子组件，传入iView的Menu组件，循环子菜单渲染出侧边菜单子组件。

③使用Javascript编写监听的方法，利用Vue的computed计算属性实时计算获取当前页面路由改变时跳转路由的信息，实时把Tab标签子组件在改变时传入的公共变量更新到侧边菜单子组件的路由状态上。

④在监听Tab标签点击事件的方法里面，编写点击Tab选项时的逻辑，对应点击的Tab选项编写跳转对应的路由，将跳转路由的信息存储在Vuex公共变量，为渲染和实时更新面包屑组件状态做准备，并实时更新当前路由信息的公共变量。

S4、通过面包屑子组件显示页面的路由层级结构，实时将当前的路由信息存进公共变量，并更新位置信息。

面包屑子组件的作用是显示网站的路由层级结构，告知用户当前所在页面，以及在需要向上级导航时使用。在引入iView UI的面包屑组件后，使用JavaScript语言、Vue进行二次开发，导入Vuex存储的公共变量，渲染至面包屑子组件并运行。同时利用computed计算属性，实时将当前的路由信息存进公共变量，并更新位置信息。

本步骤具体执行的步骤如下：

①引入面包屑子组件。

②使用Vuex配置引入公共变量，并与面包屑子组件的当前状态和菜单数据进行双向绑定。

③使用Javascript编写监听的方法，利用Vue的computed计算属性实时计算获取当前导航路由的所有信息，实时更新当前的路由信息到面包屑子组件。

S5、侧边菜单子组件、面包屑子组件和Tab标签子组件共同渲染，形成系统页面。

侧边菜单子组件、Tab标签子组件以及面包屑子组件关系紧密，而侧边菜单子组件和Tab标签子组件更加是相互影响。

在页面引入侧边菜单子组件、Tab标签子组件和面包屑子组件后，面包屑子组件和Tab标签子组件默认设置首页菜单固定。以侧边菜单子组件为主要使用，当点击侧边菜单子组件的其中一个菜单后，会打开对应的菜单页面，同时Vuex把打开的菜单页面信息和状态存储在公共变量，根据实时的公共变量变化，面包屑子组件实时更新当前页面，Tab标签子组件实时增加当前页面的标签项并设置当前状态的高亮样式。如Tab标签子组件原来已有此标签，利用匹配路由名称方法，将对应已新建的标签项设置为当前状态的高亮样式。以Tab标签子组件为辅使用，在点击任意一项标签项的时候，打开对应标签项的菜单页面，同时Vuex把打开的菜单页面信息和状态存储在公共变量，同理面包屑子组件实时更新当前页面，侧边菜单子组件把对应的菜单项设置为当前状态的高亮样式。

图3为在系统页面中，侧面菜单子组件、面包屑子组件和Tab标签子组件共同的渲染示意图。

基于相同的发明构思，本实施例还提出基于双向导航组件的页面生成系统，包括：

双向导航组件设立模块，用于实现上述步骤S1-S4，设立菜单子组件、Tab标签子组件以及面包屑子组件作为双向导航组件；并利用Vuex预先设立公共变量，建立起菜单子组件、Tab标签子组件以及面包屑子组件之间的通讯；

其中，菜单子组件与Tab标签子组件形成对应关系，清晰直观的显示出当前菜单的状态；当侧边菜单子组件、Tab标签子组件或面包屑子组件发生变化时，通过公共变量更新三个子组件各自的状态；

通过菜单子组件显示出当前菜单的状态，监听页面路由改变时跳转路由的信息，利用Vuex将所监听的信息存储到公共变量，记录每次跳转路由时被改变了的路由信息，把当前的路由信息记录为面包屑子组件渲染的依据，把当前的路由信息和已打开的路由信息记录为Tab标签子组件渲染的依据；

通过Tab标签子组件显示出当前打开的标签页和已打开的标签页，获取公共变量，并根据公共变量的数据进行渲染；监听Tab标签点击事件，设置在点击Tab标签后跳转到对应的路由，并绑定当前菜单状态，设置当前菜单状态的样式；实时记录改变后的路由信息和已打开标签页信息，并存进公共变量；

通过面包屑子组件显示页面的路由层级结构，实时将当前的路由信息存进公共变量，并更新位置信息；

渲染模块，用于实现上述步骤S5，通过菜单子组件、面包屑子组件和Tab标签子组件共同渲染，形成系统页面。

基于相同的发明构思，本实施例还提出存储介质和计算机设备。其中，存储介质上存储有计算机指令，当计算机指令被处理器执行时，实现上述页面生成方法的步骤S1-S5。计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器运行所述计算机程序时，执行上述页面生成方法的步骤S1-S5。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。