Vue Element front-end application development dynamic menu and routing association processing

Overview

In many systems I have developed, including Winform hybrid framework, Bootstrap development framework and other series of products, I tend to dynamically configure menus and manage the menu permissions and page permissions of corresponding roles to realize the system's control over user permissions. Menus generally include name, icon, order, URL connection and other related information. For VUE+Element front-end applications, the principle should be similar. This essay introduces the combination of dynamic menu configuration on the server and the associated processing of local routing to achieve dynamic menu maintenance and display processing.

1. Menu and routing processing

Since the Vue front-end also needs to introduce the concept of routing, routing is the corresponding path collection that our front-end can access. Routing defines a lot of complex information that regular menus don't have, but often we can't modify these at will, so our approach is based on the locally configured route list, and we use the back-end configuration method for the menu. The front-end dynamically obtains the menu list through the interface. Through the correspondence between the menu name and the route name, we use the menu collection as a reference, and then filter the list of all local static routes, and then obtain the route list that the user can access, and set the dynamic route to the front-end, thereby realizing the interface according to the user role/authority Change the user's menu interface and the accessible route collection.

The approximate operation process of menu routing is as follows

Several concepts of dynamic menus, local routes, menu navigation, and accessible routes in the front-end interface are shown below.

In the front-end interface processing, we display dynamic menu information through the Element interface component, and combine the relationship between menu and routing to realize the process of menu jumping to the corresponding view.

2. Menu and route list

According to the previous introduction, we have defined some dynamic menu information returned from the server. This menu information is a collection of JSON objects, as shown in the following interface.

[
  {
    id: '1',
    pid: '-1',
    text: 'Homepage',
    icon: 'dashboard',
    name: 'dashboard'
  },
  {
    id: '2',
    pid: '-1',
    text: 'Product List',
    icon: 'table',
    name: 'product'
  },
  {
    id: '3',
    pid: '-1',
    text: 'First level menu',
    icon: 'example',
    children: [
      {
        id: '3-1',
        pid: '3',
        text: 'Secondary Menu 1',
        name: 'icon',
        icon: 'example'
      },
      {
        id: '3-2',
        pid: '3',
        text: 'Secondary Menu 2',
        icon: 'tree',
        children: [
          {
            id: '3-2-1',
            pid: '3-2',
            text: 'Level 3 menu 1',
            name: 'form',
            icon: 'form'
          },
          {
            id: '3-2-2',
            pid: '3-2',
            text: 'Level 3 menu 2',
            name: 'menu1-1',
            icon: 'form'
          },
          {
            id: '3-2-3',
            pid: '3-2',
            text: 'Level 3 menu 3',
            name: 'menu1-2',
            icon: 'form'
          },
          {
            id: '3-2-4',
            pid: '3-2',
            text: 'Level 3 menu 4',
            name: 'menu1-3',
            icon: 'form'
          }
        ]
      }
    ]
  },
  {
    id: '99',
    pid: '-1',
    text: 'Company website',
    icon: 'table',
    name: 'external-link'
  }
]

The JSON of the menu is dynamically obtained based on the role. Different roles correspond to different menu sets. The menu is a multi-level tree list that can define an infinite number of levels of display. The JSON formatted view is shown below.

The Vue front end needs to initialize and define all the routes of the front end pages, including information such as the Layout of the routing page.

We can define all the routing information corresponding to the front end in a JS file, as shown below

// Define all routes of this system. The specific routes are 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')
    }]
  },

  .............................. //Omit part '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'
  }
}

The routes here do not need to be nested, because the nested relationship needs to be defined for menu display.

In addition, since our system needs to run normally before logging in to request the backend dynamic menu, we need to preset some basic routing information, such as the login interface, redirect page, home page link, etc. Therefore, we can separate two routing objects to manage this information separately.

For the management of routes, we need to create routes by default, reset routes, and dynamically set new routes. We encapsulate several functions to handle these operations.

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Reset the route export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

After the user has been processed through the login interface, the dynamic routing information will be obtained through the corresponding Action (note that here the dynamic menu is obtained first, and then the local routing is filtered, which is the dynamic routing information). After obtaining the dynamic routing, the routing collection that can be accessed by the front end can be set, as shown in the following code.

With these new routes, the menu of the front-end system can function normally. Otherwise, even if the menu is displayed on the interface, the specific view page cannot be accessed and jumps to the 404 page because the route is not available.

3. Login process processing

The previous section briefly introduced the routing process. In fact, we should start talking about routing information from the login interface.

Taking the login interface as an example, after the user logs in, it is necessary to verify the user's account and password first. If successful, continue to request the dynamic menu set corresponding to the user and switch to the corresponding page or home page through routing.

In the Store/Modules/user.js module, the corresponding login processing Action is defined as follows

We will ignore the process of verifying user login and processing tokens here, and focus on the process of dynamic menu requests and setting routes.

In the process before we need to intercept the route arrival, we define the corresponding route information request logic as shown below.

router.beforeEach(async(to, from, next) => {

In the corresponding module that handles menu routing, we define a state to carry these important information, as shown in the following definition of State.

const state = {
  menuItems: [],
  routes: [],
  addRoutes: [],
  asyncRoutes: asyncRoutes
}

// Defines the mutation of routes and menus
const mutations = {
  SET_ROUTES: (state, routes) => {
    // var list = convertRoute(routes)
    routes.push({ path: '*', redirect: '/404', hidden: true }) // This is the default error route state.addRoutes = routes
    state.routes = [].concat(routes) // constantRoutes.concat(routes)
  },
  SET_MENUS: (state, menus) => {
    state.menuItems = menus
  }
}

// Defines the Action processing for generating dynamic routes const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      getMenus().then(res => {
        const menus = res.data || [] // Get menu information uniformly through the interface const routes = []

        menus.forEach(item => {
          filterRoutes(routes, item)
        })
        console.log(routes) // Print routes commit('SET_ROUTES', routes)
        commit('SET_MENUS', menus)
        resolve(routes)
      });
    })
  }
}

Finally, return the corresponding JS definition module class information.

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

In the front-end interface processing, we display dynamic menu information through the Element interface component, and combine the relationship between menu and routing to realize the process of menu jumping to the corresponding view.

Let's take a look at the dynamic menu effect generated by the interface.

Because the dynamic display of the menu and the dynamic routing work together, it is possible to display the dynamic menu on the front end and refresh the accessible routes according to the menu set. The combination of the two can smoothly open the corresponding view page.

Let's review again. The approximate operation process of menu routing is as follows

The above is the detailed content of the association processing of dynamic menu and routing in Vue Element front-end application development. For more information about Vue Element's dynamic menu and routing, please pay attention to other related articles on 123WORDPRESS.COM!