setup for vue routes

frontend-frame/src/App.vue

@@ -3,6 +3,10 @@
 
   <!-- SYSTEM-BUILDER-list-components-html -->
 
+  <div class="routes-container">
+    <router-view/>
+  </div>
+
   </div>
 </template>
 
@@ -11,11 +15,7 @@ import { Component, Vue } from 'vue-property-decorator';
 import HelloWorld from './components/HelloWorld.vue';
 // SYSTEM-BUILDER-list-components-imports
 
-@Component({
-  components: {
-    // SYSTEM-BUILDER-list-components-decorator
-  },
-})
+@Component
 export default class App extends Vue {}
 </script>
 

frontend-frame/src/main.ts

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router';
 import './registerServiceWorker'
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

frontend-frame/src/router.ts

@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: [
+        // SYSTE-BUILDER-routes
+
+        {
+            path: '/about',
+            name: 'about',
+            // route level code-splitting
+            // this generates a separate chunk (about.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+        },
+        {
+            path: '/organizations',
+            name: 'organizations',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Organizations.vue')
+        },
+        {
+            path: '/organization/:orgId/:tab',
+            name: 'Organization',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Organization.vue')
+        },
+        {
+            path: '/users/:appId',
+            name: 'Users',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Users.vue')
+        },
+        {
+            path: '/access/:appId',
+            name: 'Access',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Access.vue')
+        },
+        {
+            path: '/bandit/:appId',
+            name: 'Bandit',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Bandit.vue')
+        },
+        {
+            path: '/switches/:appId',
+            name: 'Switches',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/Switches.vue')
+        },
+        {
+            path: '/createOrg',
+            name: 'organization creation',
+
+            component: () => import(/* webpackChunkName: "organizations" */ './views/CreateOrganization.vue')
+        },
+    ]
+});