Menu resource management of Vue element front-end application development

  • 1. Introduction to menu resources and management interface
  • 2. Combined management of menu and route

1. Introduction to menu resources and management interface

As mentioned earlier, permission management generally involves users, organizations, roles and permission functions. The basic content of ABP framework also involves these aspects. The relationship between them is basically a many to many relationship. Their relationship is as follows.

Add menu resources and sort out their relationship and table information. The sorting diagram is as follows.

Combined with the interface provided by the ABP back-end, Vue front-end needs to realize the management of basic users, organizations, roles, function permissions and other contents, as well as maintain the relationship between them. The menu list of Vue front end for permission management module is as follows.

The menu list management interface is shown in the figure below, mainly including tree list display menu structure and specific menu list query processing.

The menu view details interface is shown below, which is mainly used to simply display the attribute data related to the menu.

For the menu editing or adding interface, you need to consider selecting the list from the existing menu and selecting the icon information.

For the awesome icon, we encapsulate the component for selecting the icon, and only select from the font awesome icon. After all, the self-contained element icon is too few to meet the requirements.

The web icon selection control is modified according to the e-icon-picker control to adopt the processing of font awesome icon collection

//Vue awesome icon auto join
const req = require.context('vue-awesome/icons', true, /\.js$/)
const requireAll = requireContext => requireContext.keys()
const re = /\.\/(.*)\.js/
const fontAwesome = requireAll(req).filter((key) => {
  return key.indexOf('index.js') < 0
}).map(i => {
  return i.match(re)[1]

For menu display, we can also select the icon item of the build menu from awesome according to the configuration.

The components of menu items are modified in layout / components / sidebar / item.vue to adapt to the processing of awesome icons

render(createElement, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      //Vnodes.push (< SVG icon icon class = {icon} / >) // use custom SVG icons
      //Vnodes. Push (< I class = {icon} / >) // use the built-in element icon
      Vnodes. Push (< v-icon name = {icon} scale ='1.1 'style ='padding right: 3px' / >) // use the awesome Icon

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    return vnodes

By making changes in various places, we can use awesome’s icon collection.

2. Combined management of menu and route

The front end dynamically obtains the menu list through the interface. Through the corresponding relationship between the menu name and the route name, we take the menu set as the comparison, then filter the list of all local static routes, then obtain the route list that users can access, and set the dynamic route to the front end, so as to realize the interface according to different user roles / permissions, The user’s menu interface and accessible routing set are changed.

The general operation process of menu routing processing is as follows

The concepts of dynamic menu, local route, menu navigation and accessible route of the front-end interface are as follows.

In front-end interface processing, we display dynamic menu information through element interface components, and realize the process of menu jump to the corresponding view in combination with the relationship between menu and routing.

Therefore, in the menu information configuration interface in system management, the web address of the menu corresponds to the name of the system static route, as shown in the following interface.

The routing information format of the previously defined system is as follows:

//Define all routes of the system, and the specific route presentation is filtered by menu data
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')

  ............................... // omitted part

  'icon': {
    path: '/icon',
    component: Layout,
    children: [{
      path: '/icon',
      name: 'icon',
      component: () => import('@/views/icons/index')

  'external-link': {
    path: '',
    name: 'external-link'

With these preparations, we will get the corresponding menu list from the background after the user logs in to the system.

In the process of system login, considering that during initialization, if the user is administrator admin and the user menu is empty, you can consider using the preset static menu resources and let the user configure the permission menu first.

//System static menu
    var staticmenus = await GetStaticMenus()
    // console.log(menus)

    //If the user is admin and there is no menu in the role collection, the static menu is used
    Var username = store. Getters. Name // username
    if (username === 'admin') {
      if (!menus || typeof (menus) === 'undefined' || menus.length === 0) {
        Menu = staticmenu // the system administrator uses the static menu during initialization

Since a WinForm based ABP front-end application was previously developed, in order to integrate the two applications, we added a tag tag to the menu representation to distinguish between WinForm interface menus and web menus. After all, the processing methods of the two menus are different.

Addform: {// add form
        id: this.guid(),
        pid: '',
        name: '',
        url: '',
        seq: '001',
        isTop: false,
        expand: 1,
        visible: 1,
        webIcon: '',
        Tag: 'Web' // Web specific

The menu of the WinForm client also requests data from the server side and is built dynamically. The menu display effect of the WinForm side is as follows.

The above is the details of the menu resource management of Vue element front-end application development. For more information about the menu resource management of Vue element, please pay attention to other relevant articles of developeppaer!