CN111835646A - 一种基于Vue的模块化路由管理方法及权限控制方法 - Google Patents

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

Info

Publication number
CN111835646A
CN111835646A CN202010668928.2A CN202010668928A CN111835646A CN 111835646 A CN111835646 A CN 111835646A CN 202010668928 A CN202010668928 A CN 202010668928A CN 111835646 A CN111835646 A CN 111835646A
Authority
CN
China
Prior art keywords
file
module
routing
vue
authority
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010668928.2A
Other languages
English (en)
Other versions
CN111835646B (zh
Inventor
林桓
邓文科
宋舰
黄睿葱
鲜青林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Hongmagic Cube Network Technology Co ltd
Original Assignee
Sichuan Hongmagic Cube Network Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Hongmagic Cube Network Technology Co ltd filed Critical Sichuan Hongmagic Cube Network Technology Co ltd
Priority to CN202010668928.2A priority Critical patent/CN111835646B/zh
Publication of CN111835646A publication Critical patent/CN111835646A/zh
Application granted granted Critical
Publication of CN111835646B publication Critical patent/CN111835646B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L45/00—Routing or path finding of packets in data switching networks
    • H04L45/74—Address processing for routing
    • H04L45/745—Address table lookup; Address filtering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F21/60—Protecting data
    • G06F21/62—Protecting access to data via a platform, e.g. using keys or access control rules
    • G06F21/6218—Protecting access to data via a platform, e.g. using keys or access control rules to a system of files or objects, e.g. local or distributed file system or database
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Signal Processing (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Databases & Information Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Bioethics (AREA)
  • General Health & Medical Sciences (AREA)
  • Computer Hardware Design (AREA)
  • Computer Security & Cryptography (AREA)
  • Data Exchanges In Wide-Area Networks (AREA)

Abstract

本发明公开了一种基于Vue的模块化路由管理方法，按功能模块的划分来开发和存放组件，针对每一个模块，创建一个模块路由文件，将模块包含的组件注册到其中，该模块的全部组件注册完成后，再将该路由文件引入到项目的总路由文件，实现模块化路由。还公开了一种基于Vue的模块化路由的权限控制方法，在创建模块化路由后，针对每个二级功能模块，在其对应的Vue组件中，创建增加、删除、修改和查询的按钮，并通过指令控制这些按钮的操作权限。本发明根据业务对路由进行拆分管理，由其对应的路由文件来管理，最后在index.js文件里面聚合路由模块，可通过指令控制各操作按钮的权限，从而更简化。

Description

一种基于Vue的模块化路由管理方法及权限控制方法
技术领域
本发明涉及信息技术领域，具体的说，是一种基于Vue的模块化路由管理方法及权限控制方法。
背景技术
在互联网前端路由管理和前端权限控制技术中，传统的注册路由的方法是将所有路由对应的组件和路径注册到一个文件中，即逐条注册单个路由的路径、路由的名称、引入对应的组件，并按照系统的菜单栏的层级关系注册为对应的父子路由，在页面跳转时直接使用路由跳转，不利于前端权限的控制。并且当前端页面组件较多时，会导致代码管理混乱，可维护性低。
发明内容
本发明的目的在于提供一种基于Vue的模块化路由管理方法及权限控制方法，用于解决现有技术中传统的注册路由的方法是将所有路由对应的组件和路径注册到一个文件中导致代码管理混乱、可维护性较低的问题。
本发明通过下述技术方案解决上述问题：
一种基于Vue的模块化路由管理方法，包括：
步骤S100：根据业务将系统页面拆分为多个一级模块，为每个一级模块创建一个路由文件；每个一级模块细分为不同的二级模块，每个二级模块对应开发一个Vue组件；
步骤S200：创建router文件夹，router文件夹下创建多个子文件夹，所述子文件夹分别对应一个一级模块，用于保存一级模块的路由文件；
步骤S300：一级模块的路由信息保存在js文件中，所述路由信息包括路径、名称和源组件；js文件采用export default命令，将一级模块的路由信息输出；
创建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文件采用export default命令，将一级模块的路由信息输出；
创建index.js文件，用于聚合一级模块的路由信息，在index.js文件的文件头引入一级模块的js文件，声明一个变量保存一级模块的路由信息并采用扩展运算符注册用户路由；
步骤S400：在二级模块的Vue组件中，创建用于增加、删除、修改和查询的按钮。
在开发的系统中，按照功能将系统划分为多个一级模块，这些一级模块又进一步被细分成不同的二级模块，为二级模块添加所需要的操作，如删除、修改、查询和增加等，每个二级模块对应一个针对其功能进行开发的Vue组件，Vue组件开发完成后，创建一个router文件夹，在该文件夹下，对应每一个一级模块创建一个子文件夹，用以保存该一级模块对应的路由文件，再创建一个index.js文件，用以聚合所有一级模块对应的路由信息。每个一级模块的路由信息保存在一个js文件中。
如用户模块的路由信息保存在user.js，在user.js中使用Vue Router声明一个变量来保存用户的路由信息，包括路径、名称、源组件。再使用export default命令，将用户模块的路由输出，最后在index.js文件的文件头使用import user from“user.js”引入用户的路由文件，再使用Vue Router声明一个变量保存所有一级模块的路由信息，用扩展运算符…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，则页面上可以看到并点击增加按钮。
尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (2)

1.一种基于Vue的模块化路由管理方法，其特征在于，包括：
步骤S100：根据业务将系统页面拆分为多个一级模块，为每个一级模块创建一个路由文件；每个一级模块细分为不同的二级模块，每个二级模块对应开发一个Vue组件；
步骤S200：创建router文件夹，router文件夹下创建多个子文件夹，所述子文件夹分别对应一个一级模块，用于保存一级模块的路由文件；
步骤S300：一级模块的路由信息保存在js文件中，所述路由信息包括路径、名称和源组件；js文件采用export default命令，将一级模块的路由信息输出；
创建index.js文件，用于聚合一级模块的路由信息，在index.js文件的文件头引入一级模块的js文件，声明一个变量保存一级模块的路由信息并采用扩展运算符注册用户路由；
步骤S400：在二级模块的Vue组件中，创建用于增加、删除、修改和查询的按钮。
2.一种基于Vue的模块化路由权限控制方法，其特征在于，包括：
步骤A：利用如权利要求1所述的一种基于Vue的模块化路由管理方法建立模块化路由；
步骤B：用户登录后，调用用户信息的接口，获取用户的权限和身份信息，并存放在Vue组件的状态管理器Vuex中，状态管理器Vuex采用集中式存储所有Vue组件的状态；
步骤C：在状态管理器Vuex中，声明权限变量，分别用于存放增加按钮、删除按钮、修改按钮和查询按钮的操作权限；
步骤D：系统加载页面，在页面挂载期间，从状态管理器Vuex中读取权限变量的值，并根据权限变量的值控制页面对应的操作按钮的可见性。
CN202010668928.2A 2020-07-13 2020-07-13 一种基于Vue的模块化路由管理方法及权限控制方法 Active CN111835646B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010668928.2A CN111835646B (zh) 2020-07-13 2020-07-13 一种基于Vue的模块化路由管理方法及权限控制方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010668928.2A CN111835646B (zh) 2020-07-13 2020-07-13 一种基于Vue的模块化路由管理方法及权限控制方法

Publications (2)

Publication Number Publication Date
CN111835646A true CN111835646A (zh) 2020-10-27
CN111835646B CN111835646B (zh) 2021-03-16

Family

ID=72899869

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010668928.2A Active CN111835646B (zh) 2020-07-13 2020-07-13 一种基于Vue的模块化路由管理方法及权限控制方法

Country Status (1)

Country Link
CN (1) CN111835646B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113242471A (zh) * 2021-05-25 2021-08-10 四川虹魔方网络科技有限公司 基于Vue实现电视Launcher系统web端预览组件的方法
CN113254100A (zh) * 2021-05-25 2021-08-13 四川虹魔方网络科技有限公司 基于Vue的多级路由动态加载的实现方法
CN113835737A (zh) * 2021-08-24 2021-12-24 交控科技股份有限公司 一种前端项目添加权限的方法及系统
CN114117505A (zh) * 2022-01-26 2022-03-01 湖南湘生网络信息有限公司 一种基于控制组的通用bs架构权限管理控制系统
CN114780800A (zh) * 2022-04-25 2022-07-22 京东城市(北京)数字科技有限公司 一种多链路路由管理方法和装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107194005A (zh) * 2017-06-19 2017-09-22 福建中金在线信息科技有限公司 一种web前端页面及其生成方法、页面加载方法和装置
CN107991905A (zh) * 2017-12-25 2018-05-04 南京邮电大学 一种基于Web的多无人机任务规划的仿真系统
CN108536832A (zh) * 2018-04-12 2018-09-14 江南大学 一种页面切换智能动画效果应用方法及系统
CN109241469A (zh) * 2018-09-13 2019-01-18 安徽智恒信科技有限公司 一种基于vue实现多页面切换的方法
CN109254769A (zh) * 2018-07-26 2019-01-22 无锡天脉聚源传媒科技有限公司 一种基于vue.js的参数配置方法、系统及装置
CN109784033A (zh) * 2018-12-13 2019-05-21 平安科技（深圳）有限公司 基于页面菜单的操作权限动态配置方法及相关设备
US10430212B1 (en) * 2016-07-13 2019-10-01 Screenshare Technology Ltd. Method for recording, editing and reproduction of computer session

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10430212B1 (en) * 2016-07-13 2019-10-01 Screenshare Technology Ltd. Method for recording, editing and reproduction of computer session
CN107194005A (zh) * 2017-06-19 2017-09-22 福建中金在线信息科技有限公司 一种web前端页面及其生成方法、页面加载方法和装置
CN107991905A (zh) * 2017-12-25 2018-05-04 南京邮电大学 一种基于Web的多无人机任务规划的仿真系统
CN108536832A (zh) * 2018-04-12 2018-09-14 江南大学 一种页面切换智能动画效果应用方法及系统
CN109254769A (zh) * 2018-07-26 2019-01-22 无锡天脉聚源传媒科技有限公司 一种基于vue.js的参数配置方法、系统及装置
CN109241469A (zh) * 2018-09-13 2019-01-18 安徽智恒信科技有限公司 一种基于vue实现多页面切换的方法
CN109784033A (zh) * 2018-12-13 2019-05-21 平安科技（深圳）有限公司 基于页面菜单的操作权限动态配置方法及相关设备

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
RUNLIN: "详解基于vue，vue-router，vuex以及addRoutes进行权限控制", 《HTTPS://WWW.CNBLOGS.COM/ZHENGRUNLIN/P/8981017.HTML》 *
七月流火: "Vue路由模块化", 《HTTPS://WWW.CNBLOGS.COM/WENQYLH/P/12188315.HTML》 *
艾涵: "Vue路由模块化配置", 《HTTPS://WWW.CNBLOGS.COM/AINYI/P/11345664.HTML》 *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113242471A (zh) * 2021-05-25 2021-08-10 四川虹魔方网络科技有限公司 基于Vue实现电视Launcher系统web端预览组件的方法
CN113254100A (zh) * 2021-05-25 2021-08-13 四川虹魔方网络科技有限公司 基于Vue的多级路由动态加载的实现方法
CN113242471B (zh) * 2021-05-25 2022-07-12 四川虹魔方网络科技有限公司 基于Vue实现电视Launcher系统web端预览组件的方法
CN113254100B (zh) * 2021-05-25 2023-08-01 四川虹魔方网络科技有限公司 基于Vue的多级路由动态加载的实现方法
CN113835737A (zh) * 2021-08-24 2021-12-24 交控科技股份有限公司 一种前端项目添加权限的方法及系统
CN114117505A (zh) * 2022-01-26 2022-03-01 湖南湘生网络信息有限公司 一种基于控制组的通用bs架构权限管理控制系统
CN114780800A (zh) * 2022-04-25 2022-07-22 京东城市(北京)数字科技有限公司 一种多链路路由管理方法和装置

Also Published As

Publication number Publication date
CN111835646B (zh) 2021-03-16

Similar Documents

Publication Publication Date Title
CN111835646B (zh) 一种基于Vue的模块化路由管理方法及权限控制方法
US5745897A (en) Method and system for compiling management information base specifications
US5897636A (en) Distributed object computer system with hierarchical name space versioning
JPH10232875A (ja) データベース管理方法および並列データベース管理システム
CN102193922A (zh) 一种对数据库进行访问的方法和装置
CN110968509B (zh) 一种批量化自定义变量的方法和系统
US5303147A (en) Computer aided planning method and system
WO2003012689A1 (en) Method for fast searching and analyzing inter-relations between patents from a patent database
US7698277B2 (en) Query processor, query processor elements and a method of establishing such a query processor and query processor elements and a domain processor
CN113568604B (zh) 风控策略的更新方法、装置及计算机可读存储介质
CN108874395A (zh) 一种组件化流处理过程中的硬编译方法及装置
CN115080011B (zh) 基于抽象语法树的代码生成方法及系统
CN106020801A (zh) 一种图形第四代语言及其应用生成系统
US20050010548A1 (en) Automatic file generating apparatus, method, program and record medium
Cisowski et al. Tool Support for SDL Patterns
JPH06251073A (ja) データ流通装置
US5161224A (en) List type data storing and retrieving system
CN114461633A (zh) 应用开发工具系统
KR0175579B1 (ko) 객체지향 sdl 설계명세서의 버전 관리방법
Troelsen et al. Exploring Entity Framework Core
JPH07248840A (ja) 異種オペレーティングシステム間の課金データ互換方法
CN114896315A (zh) 固定污染源治理工况监控系统规则数据库配置方法及设备
CN115454991A (zh) 一种数据校验的处理方法
JPH07105058A (ja) リレーショナル・データ・ベース・マネージメント・システム
CN117132231A (zh) 一种电控数据自动化集成软件系统、方法及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant