循序渐进VUE+Element 前端应用开发(3）— 动态菜单和路由的关联处理

在我开发的很多系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单一般包括有名称、图标、顺序、URL连接等相关信息，对于VUE+Element 前端应用来说，应该原理上差不多，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展示的处理。

1、菜单和路由的处理过程

由于Vue前端还需要引入路由这个概念，路由是我们前端可以访问到的对应路径集合，路由定义了常规菜单说没有的很多复杂信息，但是往往这些是我们不能随意修改的，因此我们做法是以本地配置好的路由列表为基准，而菜单我们采用在后盾配置方式，前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操作过程如下所示

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念如下所示。

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

2、菜单和路由列表

根据前面的介绍，我们定义了一些从服务端返回的动态菜单信息，这些菜单信息是一个JSON对象集合，如下界面所示。

[
  {
    id: '1',
    pid: '-1',
    text: '首页',
    icon: 'dashboard',
    name: 'dashboard'
  },
  {
    id: '2',
    pid: '-1',
    text: '产品列表',
    icon: 'table',
    name: 'product'
  },
  {
    id: '3',
    pid: '-1',
    text: '一级菜单',
    icon: 'example',
    children: [
      {