setup for vue routes

frontend-frame/package.json

@@ -12,7 +12,8 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2"
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^3.5.2"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",

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')
+        },
+    ]
+});

frontend-frame/yarn.lock

@@ -8679,6 +8679,11 @@ vue-property-decorator@^9.1.2:
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
   integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
 
+vue-router@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
+  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"