Vue&Element 前端应用开发之菜单和路由的关系
source link: https://www.cnblogs.com/wuhuacong/p/14863548.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue&Element 前端应用开发之菜单和路由的关系
我们一般的应用系统，菜单是很多功能界面的入口，菜单为了更好体现功能点的设置，一般都是动态从数据库生成的，而且还需要根据用户角色的不同，过滤掉部分没有权限的菜单；在Vue&Element的纯前端框架中，还引入了路由的概念，路由是对应具体的页面视图和布局的相关信息集合，是用户可访问的页面连接集合。本篇随笔介绍Vue+Element 前端应用开发之菜单和路由的关系。
1、菜单和路由的关系
前面介绍到，菜单是展现在界面上的功能入口，路由是我们前端可以访问的连接，两者结合才能正常访问某个页面。有些系统把路由定义作为菜单的来源，那样也可以呈现菜单，不过这样他们的关系就耦合起来，而且不好实现动态的处理。
我们的菜单作为一个数据库记录，可以通过系统进行维护，从而动态生成的，它的键值对应路由即可。
我们做法是以本地配置好的路由列表为基准，而菜单我们采用在后端配置方式，前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。
菜单的编辑界面如下所示，可以在图标列表中选择合适的图标
菜单路由处理的大概的操作过程如下所示
通过数据库配置的菜单数据，最终返回到前端的时候，是一个JSON集合。 对于ABP框架的后端，我们可以查看到菜单部分的API接口
菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。
菜单包含路由的键，我们在前端JS变量中存储所有的路由信息，我们根据菜单的键来过滤系统路由，作为前端可用的路由信息，路由JS定义如下所示。
为了有效管理系统路由的集合定义，我们把它们按分类分为细粒度的模块文件进行管理，如下所示。
大概分类用文字表示如下所示。
其中的index.js就是集合所有模块的路由文件，如下所示。
用户在经过登录界面处理后，首先获得对应用户角色的可用菜单。
根据角色的菜单列表，就会通过对应的Action获取动态路由信息（注意，这里是先获取动态菜单，然后过滤本地路由，即为动态路由信息），获得动态路由后，就设置前端所能访问的路由集合即可，如下代码所示。
有了这些新的路由允许，前端系统的菜单才能够正常运转起来，否则即使界面展示了菜单，也不能访问特定的视图页面而跳到了404页面，因为路由没有。
在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。
专注于Winform开发框架/混合式开发框架、Web开发框架、Bootstrap开发框架、微信门户开发框架的研究及应用。
转载请注明出处：
撰写人：伍华聪 http://www.iqidi.com
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK