Basic calendar view

src/router/routes.ts

@@ -1,49 +1,90 @@
+import ScheduleIndexPage from 'pages/schedule/ScheduleIndexPage.vue';
+import ChecklistPageVue from 'pages/ChecklistPage.vue';
+import LoginPageVue from 'pages/LoginPage.vue';
+import ReferencePageVue from 'src/pages/reference/ReferencePage.vue';
+import ReferenceIndexPageVue from 'src/pages/reference/ReferenceIndexPage.vue';
+import ReferenceItemPageVue from 'src/pages/reference/ReferenceItemPage.vue';
+import MainLayoutVue from 'src/layouts/MainLayout.vue';
+import BoatPageVue from 'src/pages/BoatPage.vue';
+import CertificationPageVue from 'src/pages/CertificationPage.vue';
+import IndexPageVue from 'src/pages/IndexPage.vue';
+import ProfilePageVue from 'src/pages/ProfilePage.vue';
+import TaskPageVue from 'src/pages/TaskPage.vue';
 import { RouteRecordRaw } from 'vue-router';
+import BoatReservationPageVue from 'src/pages/schedule/BoatReservationPage.vue';
+import SchedulePageView from 'pages/schedule/SchedulePageView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    component: MainLayoutVue,
+    // If we get so big we need lazy loading, we can use imports again
+    // component: () => import('layouts/MainLayout.vue'),
     children: [
       {
         path: '',
-        component: () => import('pages/IndexPage.vue'),
+        // If we get so big we need lazy loading, we can use imports again
+        // component: () => import('pages/IndexPage.vue'),
+        component: IndexPageVue,
         name: 'index',
       },
       {
         path: '/boat',
-        component: () => import('pages/BoatPage.vue'),
+        component: BoatPageVue,
         name: 'boat',
       },
       {
-        path: '/booking',
-        component: () => import('pages/BookingPage.vue'),
-        name: 'booking',
+        path: '/schedule',
+        component: SchedulePageView,
+        name: 'schedule',
+        children: [
+          {
+            path: '',
+            component: ScheduleIndexPage,
+            name: 'schedule-index',
+          },
+          {
+            path: 'book',
+            component: BoatReservationPageVue,
+            name: 'reserve-boat',
+          },
+        ],
       },
       {
         path: '/certification',
-        component: () => import('pages/CertificationPage.vue'),
+        component: CertificationPageVue,
         name: 'certification',
       },
       {
         path: '/task',
-        component: () => import('pages/TaskPage.vue'),
+        component: TaskPageVue,
         name: 'task',
       },
       {
         path: '/checklist',
-        component: () => import('pages/ChecklistPage.vue'),
+        component: ChecklistPageVue,
         name: 'checklist',
       },
       {
         path: '/profile',
-        component: () => import('pages/ProfilePage.vue'),
+        component: ProfilePageVue,
         name: 'profile',
       },
       {
         path: '/reference',
-        component: () => import('pages/ReferencePage.vue'),
+        component: ReferencePageVue,
         name: 'reference',
+        children: [
+          {
+            path: '',
+            component: ReferenceIndexPageVue,
+            name: 'reference-index',
+          },
+          {
+            path: '/reference/:id/view',
+            component: ReferenceItemPageVue,
+          },
+        ],
       },
     ],
   },
@@ -65,7 +106,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/login',
-    component: () => import('pages/LoginPage.vue'),
+    component: LoginPageVue,
     name: 'login',
     meta: {
       publicRoute: true,