正文
Vue&Element 前端应用开发之菜单和路由的关系
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
我们一般的应用系统，菜单是很多功能界面的入口，菜单为了更好体现功能点的设置，一般都是动态从数据库生成的，而且还需要根据用户角色的不同，过滤掉部分没有权限的菜单；在Vue&Element的纯前端框架中，还引入了路由的概念，路由是对应具体的页面视图和布局的相关信息集合，是用户可访问的页面连接集合。本篇随笔介绍Vue+Element 前端应用开发之菜单和路由的关系。
1、菜单和路由的关系
前面介绍到，菜单是展现在界面上的功能入口，路由是我们前端可以访问的连接，两者结合才能正常访问某个页面。有些系统把路由定义作为菜单的来源，那样也可以呈现菜单，不过这样他们的关系就耦合起来，而且不好实现动态的处理。
我们的菜单作为一个数据库记录，可以通过系统进行维护，从而动态生成的，它的键值对应路由即可。
我们做法是以本地配置好的路由列表为基准，而菜单我们采用在后端配置方式，前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。
菜单的编辑界面如下所示，可以在图标列表中选择合适的图标
菜单路由处理的大概的操作过程如下所示
通过数据库配置的菜单数据，最终返回到前端的时候，是一个JSON集合。 对于ABP框架的后端，我们可以查看到菜单部分的API接口
菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。
菜单包含路由的键，我们在前端JS变量中存储所有的路由信息，我们根据菜单的键来过滤系统路由，作为前端可用的路由信息，路由JS定义如下所示。
为了有效管理系统路由的集合定义，我们把它们按分类分为细粒度的模块文件进行管理，如下所示。
大概分类用文字表示如下所示。
其中的index.js就是集合所有模块的路由文件，如下所示。
用户在经过登录界面处理后，首先获得对应用户角色的可用菜单。
根据角色的菜单列表，就会通过对应的Action获取动态路由信息（注意，这里是先获取动态菜单，然后过滤本地路由，即为动态路由信息），获得动态路由后，就设置前端所能访问的路由集合即可，如下代码所示。
有了这些新的路由允许，前端系统的菜单才能够正常运转起来，否则即使界面展示了菜单，也不能访问特定的视图页面而跳到了404页面，因为路由没有。
在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。
Vue&Element 前端应用开发之菜单和路由的关系的更多相关文章- 循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
- 循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
- 循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示
在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...
- 循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
- 循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- 循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
随机推荐- 计算机网络(8)-----TCP报文段的首部格式
TCP报文段的首部格式 概述 TCP报文段首部的前20个字节是固定的,因此TCP首部的最小长度是20字节. 源端口和目标端口 各占2个字节,分别写入源端口号和目的端口号. 序列号 占4个字节,表示本报 ...
- ef6 code first
http://www.cnblogs.com/Bce-/p/3684643.html http://www.cnblogs.com/Gyoung/tag/Entity%20Framework/ htt ...
- Working with Other Node Types II
[Working with Other Node Types II] An SKCropNode object does not directly render content, like a spr ...
- Android开发多线程断点续传下载器
使用多线程断点续传下载器在下载的时候多个线程并发可以占用服务器端更多资源,从而加快下载速度,在下载过程中记录每个线程已拷贝数据的数量,如果下载中断,比如无信号断线.电量不足等情况下,这就需要使用到断点 ...
- jupyter notebook 目录配置、导出 tex 和 pdf 及中文支持
环境:macbook pro, mactex, jupyter notebook, brew 安装pandoc从而支持格式转换为tex: brew install pandoc 修改tex artic ...
- C# --- ??(空接合操作符)的一个案例
Nullable<Int32> x = null; Nullable<Int32> y = null; Nullable<Int32> z = null; Int3 ...
- phantomjs 下拉滚动条获取网页的全部源码
//codes.js var system = require('system'); var fs = require("fs"); //console.log('Loading ...
- Bug01_MyBatis_不允许有匹配 ";[xX][mM][lL]"; 的处理指令目标。
xml 文件格式不正确.一般是开头约束不对. 我出现的问题是:<?xml version="1.0" encoding="UTF-8"?>写了两遍, ...
- 教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众 ...
- js jQuery 右键菜单 清屏
主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置. http:// ...
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- 计算机网络(8)-----TCP报文段的首部格式
TCP报文段的首部格式 概述 TCP报文段首部的前20个字节是固定的,因此TCP首部的最小长度是20字节. 源端口和目标端口 各占2个字节,分别写入源端口号和目的端口号. 序列号 占4个字节,表示本报 ...
- ef6 code first
http://www.cnblogs.com/Bce-/p/3684643.html http://www.cnblogs.com/Gyoung/tag/Entity%20Framework/ htt ...
- Working with Other Node Types II
[Working with Other Node Types II] An SKCropNode object does not directly render content, like a spr ...
- Android开发多线程断点续传下载器
使用多线程断点续传下载器在下载的时候多个线程并发可以占用服务器端更多资源,从而加快下载速度,在下载过程中记录每个线程已拷贝数据的数量,如果下载中断,比如无信号断线.电量不足等情况下,这就需要使用到断点 ...
- jupyter notebook 目录配置、导出 tex 和 pdf 及中文支持
环境:macbook pro, mactex, jupyter notebook, brew 安装pandoc从而支持格式转换为tex: brew install pandoc 修改tex artic ...
- C# --- ??(空接合操作符)的一个案例
Nullable<Int32> x = null; Nullable<Int32> y = null; Nullable<Int32> z = null; Int3 ...
- phantomjs 下拉滚动条获取网页的全部源码
//codes.js var system = require('system'); var fs = require("fs"); //console.log('Loading ...
- Bug01_MyBatis_不允许有匹配 ";[xX][mM][lL]"; 的处理指令目标。
xml 文件格式不正确.一般是开头约束不对. 我出现的问题是:<?xml version="1.0" encoding="UTF-8"?>写了两遍, ...
- 教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众 ...
- js jQuery 右键菜单 清屏
主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置. http:// ...
