# 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'                                  // <--│ 
          }
        }
      }
    ]
  }
]
```