Updated routes

src/pages/Customer/Card/CustomerCard.vue

@@ -1,7 +1,13 @@
 <script setup>
+import { computed } from 'vue';
 import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
 
 const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
@@ -9,6 +15,7 @@ const state = useState();
             <router-link :to="{ path: '/customer/list' }">
                 <q-icon name="arrow_back" size="md" color="primary" />
             </router-link>
+            <div>Customer ID: {{ entityId }}</div>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>

src/pages/Ticket/Card/TicketBasicData.vue

@@ -0,0 +1,3 @@
+<template>
+    <q-card>Basic Data</q-card>
+</template>

src/pages/Ticket/Card/TicketCard.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
+
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/pages/Ticket/TicketMain.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const drawer = ref(false);
+const state = useState();
 const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"

src/router/modules/ticket.js

@@ -29,16 +29,16 @@ export default {
         },
         {
             path: ':id',
-            component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
-            redirect: { name: 'CustomerBasicData' },
+            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+            redirect: { name: 'TicketBasicData' },
             children: [
                 {
                     path: 'basic-data',
-                    name: 'CustomerBasicData',
+                    name: 'TicketBasicData',
                     meta: {
                         title: 'basicData'
                     },
-                    component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 }
             ]
         },

src/types/route.ts

@@ -1,4 +0,0 @@
-export interface Route {
-    path: string;
-    component: any;
-}