ibs
/
ibs-member-frontend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Routing | iBS Member Portal</title>
    <meta name="description" content="Where members buy things">
    
    
    <link rel="preload" href="/assets/css/0.styles.28eb1cfb.css" as="style"><link rel="preload" href="/assets/js/app.55150c2a.js" as="script"><link rel="preload" href="/assets/js/5.23398373.js" as="script"><link rel="prefetch" href="/assets/js/2.e4e62d97.js"><link rel="prefetch" href="/assets/js/3.e7a76029.js"><link rel="prefetch" href="/assets/js/4.bbd779fa.js"><link rel="prefetch" href="/assets/js/6.10a57b17.js">
    <link rel="stylesheet" href="/assets/css/0.styles.28eb1cfb.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">iBS Member Portal</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">Home</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Resources</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/1kN1cyT0M-cjiCo3Qys5ydtX-Unam174E" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Prototype
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/0B3pJekzAmHmTZWtReXphWDk4QzQ" target="_blank" rel="noopener noreferrer" class="nav-link external">
  URS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/0B-IzsfKWJTKTYlVadHBHTnpMNE0" target="_blank" rel="noopener noreferrer" class="nav-link external">
  API Docs
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">Home</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Resources</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/1kN1cyT0M-cjiCo3Qys5ydtX-Unam174E" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Prototype
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/0B3pJekzAmHmTZWtReXphWDk4QzQ" target="_blank" rel="noopener noreferrer" class="nav-link external">
  URS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://drive.google.com/drive/u/0/folders/0B-IzsfKWJTKTYlVadHBHTnpMNE0" target="_blank" rel="noopener noreferrer" class="nav-link external">
  API Docs
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/" class="sidebar-link">Hello Fellow Developers</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/#passing-wisdom-developer-mindset" class="sidebar-link">Passing wisdom - Developer mindset</a></li><li class="sidebar-sub-header"><a href="/guide/#principles-from-agile-manifesto" class="sidebar-link">Principles - from Agile Manifesto</a></li></ul></li><li><a href="/guide/routing.html" class="active sidebar-link">Routing</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/routing.html#creating-new-routes" class="sidebar-link">Creating New Routes</a></li><li class="sidebar-sub-header"><a href="/guide/routing.html#adding-routes-to-menus" class="sidebar-link">Adding routes to menus</a></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="routing"><a href="#routing" aria-hidden="true" class="header-anchor">#</a> Routing</h1> <p>New ibs member portal uses vue-router for routing purposes. We use the vue-router in history mode to remove the <code>#</code>
from the url link. So our development environment has url rewrite configured.</p> <p>The routing root file is in <code>src -&gt; routing</code>. Where we do the default config. The router will pick up all the files ending with
<code>router.js</code> and merge all the routes to gather before starting up.</p> <div class="language- extra-class"><pre class="language-text"><code>.
├─ src
│  ├─ routes
│  │   └─ index.js // &lt;------------------------------------- Main entry point for routes
│  ├─ app
│  │   ├─ xxx
│  │   │   └─ _routes.js // &lt;-------------------------------- Lookedup
│  │   ├─ xxx
│  │   │   └─ xxx
│  │   │       └─ _routes.js // &lt;---------------------------- Lookedup
│  │   └─ xxx
│  │       └─ xxx
│  │           └─ xxx
│  │               └─ _routes.js // &lt;------------------------ Lookedup
└─ xxx
</code></pre></div><h2 id="creating-new-routes"><a href="#creating-new-routes" aria-hidden="true" class="header-anchor">#</a> Creating New Routes</h2> <p>To create new routes, you have to create a routes.js file in the module. Following is an example</p> <div class="language- extra-class"><pre class="language-text"><code>import { DASHBOARD_HOME as URL_PREFIX } from '@/config/url-prefix'

export default [
  {
    path: '/',
    component: () =&gt; import('@/elements/templates/screens/SidebarFluid'),
    name: 'Dashboard',
    redirect: URL_PREFIX,
    children: [
      {
        path: URL_PREFIX,
        component: () =&gt; 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'
          }
        }
      }
    ]
  }
]
</code></pre></div><h2 id="adding-routes-to-menus"><a href="#adding-routes-to-menus" aria-hidden="true" class="header-anchor">#</a> Adding routes to menus</h2> <p>The menu system is configured to be generated using routes meta. You can see the menus generated in the system from
<code>src -&gt; config -&gt; menu.js</code>. 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.</p> <div class="language- extra-class"><pre class="language-text"><code>import { DASHBOARD_HOME as URL_PREFIX } from '@/config/url-prefix'

export default [
  {
    path: '/',
    component: () =&gt; import('@/elements/templates/screens/SidebarFluid'),
    name: 'Dashboard',
    redirect: URL_PREFIX,
    children: [
      {
        path: URL_PREFIX,
        component: () =&gt; import('./components/Home'),
        name: 'DashboardHome',
        meta: {
          title: '',
          dashboardMenu: {                            // &lt;--│ 
            displayName: 'Eshop.Menu.Dashboard.Home', // &lt;--│ This route will be added to dashboard 
            priority: 11,                             // &lt;--│ menu.
            icon: 'sidebar-dashboard'                 // &lt;--│
          },
          topMenu: {
            displayName: 'Eshop.Menu.Dashboard.HomeWithBack', // &lt;--│ This route will be added to topMenu
            priority: 0,                                      // &lt;--│ menu.
            position: 'left'                                  // &lt;--│ 
          }
        }
      }
    ]
  }
]
</code></pre></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/guide/" class="prev router-link-active">
          Hello Fellow Developers
        </a></span> <!----></p></div> </div> <!----></div></div>
    <script src="/assets/js/app.55150c2a.js" defer></script><script src="/assets/js/5.23398373.js" defer></script>
  </body>
</html>