ibs-member-frontend/docs/guide/routing.md

Routing

New ibs member portal uses vue-router for routing purposes. We use the vue-router in history mode to remove the # from the url link. So our development environment has url rewrite configured.

The routing root file is in src -> routing. Where we do the default config. The router will pick up all the files ending with router.js and merge all the routes to gather before starting up.

.
├─ src
│  ├─ routes
│  │   └─ index.js // <------------------------------------- Main entry point for routes
│  ├─ app
│  │   ├─ xxx
│  │   │   └─ _routes.js // <-------------------------------- Lookedup
│  │   ├─ xxx
│  │   │   └─ xxx
│  │   │       └─ _routes.js // <---------------------------- Lookedup
│  │   └─ xxx
│  │       └─ xxx
│  │           └─ xxx
│  │               └─ _routes.js // <------------------------ Lookedup
└─ xxx

Creating New Routes

To create new routes, you have to create a routes.js file in the module. Following is an example

import { DASHBOARD_HOME as URL_PREFIX } from '@/config/url-prefix'

export default [
  {
    path: '/',
    component: () => import('@/elements/templates/screens/SidebarFluid'),
    name: 'Dashboard',
    redirect: URL_PREFIX,
    children: [
      {
        path: URL_PREFIX,
        component: () => import('./components/Home'),
        name: 'DashboardHome',
        meta: {
          title: '',
          dashboardMenu: {
            displayName: 'Eshop.Menu.Dashboard.Home',
            priority: 11,
            icon: 'sidebar-dashboard'
          },
          topMenu: {
            displayName: 'Eshop.Menu.Dashboard.HomeWithBack',
            priority: 0,
            position: 'left'
          }
        }
      }
    ]
  }
]

Adding routes to menus

The menu system is configured to be generated using routes meta. You can see the menus generated in the system from src -> config -> menu.js. So you can specify the route to be added to any of the specified menu. Also the displayName used for the menu is passed through the translator so translated names can be used.

import { DASHBOARD_HOME as URL_PREFIX } from '@/config/url-prefix'

export default [
  {
    path: '/',
    component: () => import('@/elements/templates/screens/SidebarFluid'),
    name: 'Dashboard',
    redirect: URL_PREFIX,
    children: [
      {
        path: URL_PREFIX,
        component: () => import('./components/Home'),
        name: 'DashboardHome',
        meta: {
          title: '',
          dashboardMenu: {                            // <--│ 
            displayName: 'Eshop.Menu.Dashboard.Home', // <--│ This route will be added to dashboard 
            priority: 11,                             // <--│ menu.
            icon: 'sidebar-dashboard'                 // <--│
          },
          topMenu: {
            displayName: 'Eshop.Menu.Dashboard.HomeWithBack', // <--│ This route will be added to topMenu
            priority: 0,                                      // <--│ menu.
            position: 'left'                                  // <--│ 
          }
        }
      }
    ]
  }
]