一种基于Vue的模块化路由管理方法及权限控制方法与流程

本发明涉及信息技术领域，具体的说，是一种基于vue的模块化路由管理方法及权限控制方法。

背景技术：

在互联网前端路由管理和前端权限控制技术中，传统的注册路由的方法是将所有路由对应的组件和路径注册到一个文件中，即逐条注册单个路由的路径、路由的名称、引入对应的组件，并按照系统的菜单栏的层级关系注册为对应的父子路由，在页面跳转时直接使用路由跳转，不利于前端权限的控制。并且当前端页面组件较多时，会导致代码管理混乱，可维护性低。

技术实现要素：

本发明的目的在于提供一种基于vue的模块化路由管理方法及权限控制方法，用于解决现有技术中传统的注册路由的方法是将所有路由对应的组件和路径注册到一个文件中导致代码管理混乱、可维护性较低的问题。

本发明通过下述技术方案解决上述问题：

一种基于vue的模块化路由管理方法，包括：

步骤s100：根据业务将系统页面拆分为多个一级模块，为每个一级模块创建一个路由文件；每个一级模块细分为不同的二级模块，每个二级模块对应开发一个vue组件；

步骤s200：创建router文件夹，router文件夹下创建多个子文件夹，所述子文件夹分别对应一个一级模块，用于保存一级模块的路由文件；

步骤s300：一级模块的路由信息保存在js文件中，所述路由信息包括路径、名称和源组件；js文件采用exportdefault命令，将一级模块的路由信息输出；

创建index.js文件，用于聚合一级模块的路由信息，在index.js文件的文件头引入一级模块的js文件，声明一个变量保存一级模块的路由信息并采用扩展运算符注册用户路由；

步骤s400：在二级模块的vue组件中，创建用于增加、删除、修改和查询的按钮。

在开发的系统中，按照功能将系统划分为多个一级模块，这些一级模块又进一步被细分成不同的二级模块，为二级模块添加所需要的操作，如删除、修改、查询和增加等，每个二级模块对应一个针对其功能进行开发的vue组件，vue组件开发完成后，创建一个router文件夹，在该文件夹下，对应每一个一级模块创建一个子文件夹，用以保存该一级模块对应的路由文件，再创建一个index.js文件，用以聚合所有一级模块对应的路由信息。每个一级模块的路由信息保存在一个js文件中。index.js文件的文件头引入一级模块的js文件。

模块化路由完成后，针对每个二级功能模块，在其对应的vue组件中，创建增加、删除、修改和查询的按钮，并通过指令控制这些按钮的操作权限。

按功能模块的划分来开发和存放组件，针对每一个模块，创建一个模块路由文件，将模块包含的组件注册到其中，该模块的全部组件注册完成后，再将该路由文件引入到项目的总路由文件，这样便使得整个路由管理的过程有序且清晰。通过模块化设计，封装路由注册的细节，提供模块接口，降低代码间的耦合度，最大化达到设计重用，避免代码间的管理混乱，增强了系统的可维护和可测试性。

一种基于vue的模块化路由权限控制方法，包括：

步骤a：建立模块化路由，路由模块化完成后，使用指令来控制需要进行权限控制的按钮；

步骤b：用户登录后，调用用户信息的接口，获取用户的权限和身份信息，并存放在vue组件的状态管理器vuex中，状态管理器vuex采用集中式存储所有vue组件的状态；

步骤c：在状态管理器vuex中，声明权限变量，分别用于存放增加按钮、删除按钮、修改按钮和查询按钮的操作权限；

步骤d：系统加载页面，在页面挂载期间，从状态管理器vuex中读取权限变量的值，并根据权限变量的值控制页面对应的操作按钮的可见性。

本发明与现有技术相比，具有以下优点及有益效果：

本发明根据业务对路由进行拆分管理，每个业务对应的页面拆分为一个模块，由其对应的路由文件来管理，最后再在一个总的index.js文件里面聚合各个业务对应的路由模块，从而达到简化的目的。路由拆分管理完成后，对于权限只体现在用户的增删改查等操作上的系统，可通过指令控制各操作按钮的权限，从而更简化。

附图说明

图1为本发明的模块化路由管理流程图；

图2为本发明的权限控制流程图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

一种基于vue的模块化路由管理方法，包括：

步骤s100：根据业务将系统页面拆分为多个一级模块，为每个一级模块创建一个路由文件；每个一级模块细分为不同的二级模块，每个二级模块对应开发一个vue组件；

步骤s200：创建router文件夹，router文件夹下创建多个子文件夹，所述子文件夹分别对应一个一级模块，用于保存一级模块的路由文件；

步骤s300：一级模块的路由信息保存在js文件中，所述路由信息包括路径、名称和源组件；js文件采用exportdefault命令，将一级模块的路由信息输出；

创建index.js文件，用于聚合一级模块的路由信息，在index.js文件的文件头引入一级模块的js文件，声明一个变量保存一级模块的路由信息并采用扩展运算符注册用户路由；

步骤s400：在二级模块的vue组件中，创建用于增加、删除、修改和查询的按钮。

在开发的系统中，按照功能将系统划分为多个一级模块，这些一级模块又进一步被细分成不同的二级模块，为二级模块添加所需要的操作，如删除、修改、查询和增加等，每个二级模块对应一个针对其功能进行开发的vue组件，vue组件开发完成后，创建一个router文件夹，在该文件夹下，对应每一个一级模块创建一个子文件夹，用以保存该一级模块对应的路由文件，再创建一个index.js文件，用以聚合所有一级模块对应的路由信息。每个一级模块的路由信息保存在一个js文件中。

如用户模块的路由信息保存在user.js，在user.js中使用vuerouter声明一个变量来保存用户的路由信息，包括路径、名称、源组件。再使用exportdefault命令，将用户模块的路由输出，最后在index.js文件的文件头使用importuserfrom“user.js”引入用户的路由文件，再使用vuerouter声明一个变量保存所有一级模块的路由信息，用扩展运算符…user注册用户路由。

模块化路由完成后，针对每个二级功能模块，在其对应的vue组件中，创建增加、删除、修改和查询的按钮，并通过指令控制这些按钮的操作权限。

如附图1所示，按功能模块的划分来开发和存放组件，针对每一个模块，创建一个模块路由文件，将模块包含的组件注册到其中，该模块的全部组件注册完成后，再将该路由文件引入到项目的总路由文件，这样便使得整个路由管理的过程有序且清晰。通过模块化设计，封装路由注册的细节，提供模块接口，降低代码间的耦合度，最大化达到设计重用，避免代码间的管理混乱，增强了系统的可维护和可测试性。

实施例2：

结合图2所示，一种基于vue的模块化路由权限控制方法，包括：

步骤a：建立模块化路由，路由模块化完成后，使用指令来控制需要进行权限控制的按钮；

步骤b：用户登录后，调用用户信息的接口，获取用户的权限和身份信息，并存放在vue组件的状态管理器vuex中，状态管理器vuex采用集中式存储所有vue组件的状态；

步骤c：在状态管理器vuex中，声明权限变量，分别用于存放增加按钮、删除按钮、修改按钮和查询按钮的操作权限；

步骤d：系统加载页面，在页面挂载期间，从状态管理器vuex中读取权限变量的值，并根据权限变量的值控制页面对应的操作按钮的可见性。

如：在用户信息接口中，增删改查这四种操作分别用数字abcd表示，若信息中有字母a，则表示改用户可以进行增加的操作，获取到这些信息后，在vuex中声明对应的addenable、delenable、editenable、searchenable四个变量来存放是否可进行增删改查询操作，若可以增加，则addenable的值为true，否则为false，接着在对应的有增删改查询按钮的组件中，读取状态管理器vuex中的这四个对应变量的值，通过值去控制按钮的可见性，从而达到控制按钮权限的目的。

读取权限变量的过程：状态管理器vuex中有一个mutations事件，在该事件中，声明一个checkaddpermission方法，在方法中判断用户信息是否包含字母a，若包含则改变addenable的值为true，再在有增加按钮的页面中，调用checkaddpermission方法得到addenable的值，使用这个值控制按钮的可见性，若为true，则页面上可以看到并点击增加按钮。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。