当前位置:编程学习 > > 正文

vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

时间:2022-04-02 16:51:15类别:编程学习

vueelementui左侧菜单

Vue Element前端应用开发之动态菜单和路由的关联处理

概述

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

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

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

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

vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

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

vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

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

vueelementui左侧菜单(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: [
          {
            id: '3-1',
            pid: '3',
            text: '二级菜单1',
            name: 'icon',
            icon: 'example'
          },
          {
            id: '3-2',
            pid: '3',
            text: '二级菜单2',
            icon: 'tree',
            children: [
              {
                id: '3-2-1',
                pid: '3-2',
                text: '三级菜单1',
                name: 'form',
                icon: 'form'
              },
              {
                id: '3-2-2',
                pid: '3-2',
                text: '三级菜单2',
                name: 'menu1-1',
                icon: 'form'
              },
              {
                id: '3-2-3',
                pid: '3-2',
                text: '三级菜单3',
                name: 'menu1-2',
                icon: 'form'
              },
              {
                id: '3-2-4',
                pid: '3-2',
                text: '三级菜单4',
                name: 'menu1-3',
                icon: 'form'
              }
            ]
          }
        ]
      },
      {
        id: '99',
        pid: '-1',
        text: '公司官网',
        icon: 'table',
        name: 'external-link'
      }
    ]
    
  • 菜单的JSON是根据角色进行动态获取的,不同的角色对应不同的菜单集合,并且菜单是一个多层次的树列表,可以定义无穷多级的展示,JSON格式化视图如下所示。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    而Vue前端需要初始化定义前端页面的所有路由,这些包括路由页面的Layout等信息。

    我们可以在一个JS文件里面定义好对应前端所有的路由信息,如下所示

  • // 定义本系统的所有路由,具体路由呈现经过菜单数据过滤
    export const asyncRoutes = {
      'dashboard': {
        path: '/dashboard',
        component: Layout,
        children: [{
          path: 'dashboard',
          name: 'dashboard',
          component: () => import('@/views/dashboard/index')
        }]
      },
      'product': {
        path: '/product',
        component: Layout,
        children: [{
          path: '/product',
          name: 'product',
          component: () => import('@/views/Product/index')
        }]
      },
    
      .............................. //省略部分
    
      'icon': {
        path: '/icon',
        component: Layout,
        children: [{
          path: '/icon',
          name: 'icon',
          component: () => import('@/views/icons/index')
        }]
      },
    
      'external-link': {
        path: 'http://www.iqidi.com',
        name: 'external-link'
      }
    }
    
  • 这里的路由不需要嵌套,因为菜单展示才需要定义嵌套关系。

    另外,由于系统在未登录请求后端动态菜单前,我们系统也需要正常运行起来,那么就需要预设一些基础的路由信息,如登录界面、重定向页面、首页链接等这些路由信息,因此我们可以分开两个路由对象,用来分开管理这些信息。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    对路由的管理,一个需要默认创建路由的处理、重置路由的处理,以及动态设置新的路由处理,我们封装几个函数来处理这些操作。

  • const createRouter = () => new Router({
      // mode: 'history', // require service support
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })
    
    const router = createRouter()
    
    // 重置路由
    export function resetRouter() {
      const newRouter = createRouter()
      router.matcher = newRouter.matcher // reset router
    }
    
  • 用户在经过登录界面处理后,就会通过对应的Action获取动态路由信息(注意,这里是先获取动态菜单,然后过滤本地路由,即为动态路由信息),获得动态路由后,就设置前端所能访问的路由集合即可,如下代码所示。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    有了这些新的路由允许,前端系统的菜单才能够正常运转起来,否则即使界面展示了菜单,也不能访问特定的视图页面而跳到了404页面,因为路由没有。

    3、登录的过程处理

    前面大概介绍了路由的处理过程,其实我们路由信息,应该需要从登录界面开始讲起。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    以登录界面为例,在用户登录处理后,需要先验证用户的账号密码,成功后继续请求该用户对应的动态菜单集合,并通过路由切换到对应的页面或者首页。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    在Store/Modules/user.js模块里面,定义了对应的登陆处理Action,如下所示

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    我们这里忽略用户登录的检验和处理token的过程,主要关注动态菜单请求并设置路由的过程。

    在我们需要拦截路由到达前的处理中,我们定义对应的路由信息请求逻辑,如下所示。

  • router.beforeEach(async(to, from, next) => {
    
  • vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    在处理菜单路由的对应模块里面,我们定义了一个状态用来承载这些重要信息,如下定义State所示。

  • const state = {
      menuItems: [],
      routes: [],
      addRoutes: [],
      asyncRoutes: asyncRoutes
    }
    
  • // 定义了路由和菜单的Mutation
    const mutations = {
      SET_ROUTES: (state, routes) => {
        // var list = convertRoute(routes)
        routes.push({ path: '*', redirect: '/404', hidden: true }) // 此为默认错误路由
    
        state.addRoutes = routes
        state.routes = [].concat(routes)// constantRoutes.concat(routes)
      },
      SET_MENUS: (state, menus) => {
        state.menuItems = menus
      }
    }
    
  • // 定义了生成动态路由的Action处理
    const actions = {
      generateRoutes({ commit }, roles) {
        return new Promise(resolve => {
          getMenus().then(res => {
            const menus = res.data || [] // 统一通过接口获取菜单信息
            const routes = []
    
            menus.forEach(item => {
              filterRoutes(routes, item)
            })
            console.log(routes)// 打印路由
    
            commit('SET_ROUTES', routes)
            commit('SET_MENUS', menus)
            resolve(routes)
          });
        })
      }
    }
    
  • 最后返回对应的JS定义模块类信息即可。

  • export default {
      namespaced: true,
      state,
      mutations,
      actions
    }
    
  • 在前端界面处理中,我们通过Element界面组件的方式展示动态菜单信息,并结合菜单和路由的关系,实现菜单跳转到对应视图的处理过程。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    我们来看看界面生成的动态菜单效果。

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    由于菜单动态展示和动态路由配合,因此既能在前端实现动态菜单的展示,又会根据菜单的集合刷新可访问路由,两者结合就可以顺利打开对应的视图页面了。

    再来回顾一下,菜单路由处理的大概的操作过程如下所示

    vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)

    以上就是Vue Element前端应用开发之动态菜单和路由的关联处理的详细内容,更多关于Vue Element之动态菜单和路由的资料请关注开心学习网其它相关文章!

    上一篇下一篇

    猜您喜欢

    热门推荐