一种基于vueJS开发web管理平台架构的方法技术

本发明专利技术公开了一种基于vueJS开发web管理平台架构的方法，通过递归组件渲染多级菜单，通过url和菜单项name值的对应实现双向绑定；通过按约定方式配置路由实现基于vuejs快速搭建web管理平台架构。通过上述方式，本发明专利技术能够降低开发后端管理系统的复杂度并保持一定的灵活性。

A method of developing web management platform architecture based on vuejs

【技术实现步骤摘要】
一种基于vueJS开发web管理平台架构的方法
本专利技术涉及后台管理平台前端开发领域，特别是涉及一种基于vueJS开发web管理平台架构的方法。
技术介绍
传统的后台管理平台前端开发，路由和菜单数据一般都是分开维护，路由和菜单的对应关系需要经过处理。当存在多级菜单时，前端为了处理路由和多级菜单的对应关系和菜单的状态，往往需要做很多复杂的数据结构转换，导致逻辑不够清晰并且不易维护。后台管理系统一般面向内部人员使用，页面布局通常没有过多的定制化需求，这就为抽象通用布局框架提供了可能。目前后端管理系统开发模式中，比较常见的是路由和菜单分开设置，路由一份数据，菜单一份数据，再通过处理把路由和菜单关联起来。还有一种方式是通过高度封装的组件，通过配置实现路由和菜单的关联。组件通常会暴露菜单配置和路由相关的api，提前约定好配置参数，根据配置文档即可搭建出即开即用的后端管理系统的前端框架。路由和菜单分开管理的方案，往往需要对数据进行复杂的处理才能把路由和菜单关联起来。状态管理等功能需要做额外的处理，导致逻辑结构不清晰。当后续需要扩展多级菜单，权限管理，面包屑导航等功能时，又需要加各种不同的处理逻辑，往往需求更改需要修改多处代码。另一种方案中，虽然更加简便，通过配置路由的方式即可实现大部分功能，但是因为高度封装也失去了一定的灵活性，当迫切需要某个功能时，只能通过开发组件的人员添加相应的api。
技术实现思路
本专利技术主要解决的技术问题是提供一种基于vueJS开发web管理平台架构的方法，能够降低开发后端管理系统的复杂度并保持一定的灵活性；封装了菜单组件，绑定了路由和菜单数据的对应关系，约定了部分参数的用途。但并没有进行整体封装，如有个性化需求即可进行灵活修改。为解决上述技术问题，本专利技术采用的一个技术方案是：提供一种基于vueJS开发web管理平台架构的方法，包括：第一，约定url格式，分为和菜单对应的路由和业务路由两部分，通过一个特殊字符区分开，分隔出菜单路由；第二，约定路由数据的格式为多层嵌套结构，path和name属性值相同，菜单需要跳转的路由通过每层的path拼接生成最终的url，name为菜单项的唯一key；第三，一层路由数据对应一级菜单，再通过递归组件渲染出多级菜单；点击根级菜单跳转到相应路由，根据从url分隔出的字符串path和菜单的name即可递归匹配出菜单的激活状态，实现路由和菜单的双向绑定；第四，因为路由表使用了子路由，所以当有多级菜单时，文件结构也需要和路由表一样使用嵌套的方式创建，且每级目录都需要有一个公共组件去挂载子组件。本专利技术的有益效果是：本专利技术开发效率高，下载模板，根据写好的路由配置进行修改，即可快速运行多级菜单的后台管理前端框架，快速进行业务开发；本专利技术可灵活配置，因为只对菜单和路由进行了绑定，并且并没有进行高度的封装，可根据需求添加或着修改功能。附图说明图1是本专利技术一种基于vueJS开发web管理平台架构的方法一较佳实施例的流程图。具体实施方式下面结合附图对本专利技术的较佳实施例进行详细阐述，以使本专利技术的优点和特征能更易于被本领域技术人员理解，从而对本专利技术的保护范围做出更为清楚明确的界定。请参阅图1，本专利技术实施例包括：一种基于vueJS开发web管理平台架构的方法，通过递归组件渲染多级菜单，通过url和菜单项name值的对应实现双向绑定；通过按约定方式配置路由实现基于vuejs快速搭建web管理平台架构；具体包括以下步骤：第一，约定url格式，分为和菜单对应的路由和业务路由两部分，通过一个特殊字符区分开，方便分隔出菜单路由；第二，约定路由数据的格式为多层嵌套结构，path和name属性值相同，菜单需要跳转的路由通过每层的path拼接生成最终的url，name为菜单项的唯一key；第三，一层路由数据对应一级菜单，再通过递归组件渲染出多级菜单。点击根级菜单会跳转到相应路由，根据从url分隔出的字符串path和菜单的name即可递归匹配出菜单的激活状态，实现路由和菜单的双向绑定；第四，因为路由表使用了子路由，所以当有多级菜单时，文件结构也需要和路由表一样使用嵌套的方式创建，且每级目录都需要有一个公共组件去挂载子组件。本专利技术适用于含有多级菜单的固定布局的管理平台项目，例如左侧菜单栏，右侧内容区布局。本专利技术通过递归组件实现了任意级数的菜单结构；通过约定url和菜单key的对应，实现了url和菜单项的双向绑定。不需要通过复杂的处理渲染多级菜单亦或者刷新页面丢失当前菜单的活跃状态。多层嵌套的路由数据结构对应多级菜单，可以更方便的扩展面包屑导航，权限管理等功能。搭建起此框架后，只需按照格式维护好路由表数据，创建对应的vue页面组件，就可以快速进行业务的开发实现。以上所述仅为本专利技术的实施例，并非因此限制本专利技术的专利范围，凡是利用本专利技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的
，均同理包括在本专利技术的专利保护范围内。本文档来自技高网...

【技术保护点】
1.一种基于vueJS开发web管理平台架构的方法，其特征在于，包括：/n第一，约定url格式，分为和菜单对应的路由和业务路由两部分，通过一个特殊字符区分开，分隔出菜单路由；/n第二，约定路由数据的格式为多层嵌套结构，path和name属性值相同，菜单需要跳转的路由通过每层的path拼接生成最终的url，name为菜单项的唯一key；/n第三，一层路由数据对应一级菜单，再通过递归组件渲染出多级菜单；点击根级菜单跳转到相应路由，根据从url分隔出的字符串path和菜单的name即可递归匹配出菜单的激活状态，实现路由和菜单的双向绑定；/n第四，因为路由表使用了子路由，所以当有多级菜单时，文件结构也需要和路由表一样使用嵌套的方式创建，且每级目录都需要有一个公共组件去挂载子组件。/n

【技术特征摘要】
1.一种基于vueJS开发web管理平台架构的方法，其特征在于，包括：
第一，约定url格式，分为和菜单对应的路由和业务路由两部分，通过一个特殊字符区分开，分隔出菜单路由；
第二，约定路由数据的格式为多层嵌套结构，path和name属性值相同，菜单需要跳转的路由通过每层的path拼接生成最终的url，name为菜单项的唯一key；

【专利技术属性】
技术研发人员：高强，张志，
申请(专利权)人：浪潮金融信息技术有限公司，
类型：发明
国别省市：江苏;32