Use <router-link> instead of a @click handler in SceneryTimetable

src/components/SceneryView/SceneryTimetable.vue

@@ -63,14 +63,13 @@
           {{ $t('scenery.no-timetables') }}
         </div>
 
-        <div
+        <router-link
-          class="timetable-item"
+          class="timetable-item block-link"
           v-else
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
           tabindex="0"
-          @click.prevent.stop="driverMixin_showDriverView(row.train.id)"
+          :to="row.train.driverRouteLocation"
-          @keydown.enter.prevent="driverMixin_showDriverView(row.train.id)"
         >
           <span class="timetable-general">
             <span class="general-info">
@@ -169,7 +168,7 @@
               </span>
             </span>
           </span>
-        </div>
+        </router-link>
       </transition-group>
     </div>
   </section>
@@ -196,7 +195,7 @@ export default defineComponent({
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, trainCategoryMixin, driverViewMixin],
+  mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
   props: {
     station: {
@@ -391,7 +390,6 @@ export default defineComponent({
 
     background: #353535;
 
-    cursor: pointer;
     z-index: 10;
 
     &.empty {

src/components/TrainsView/TrainTable.vue

@@ -18,7 +18,7 @@
           v-for="train in trains"
           :key="train.id"
         >
-          <router-link class="block-link" :to="getTrainRoute(train.id)">
+          <router-link class="block-link" :to="train.driverRouteLocation">
             <TrainInfo :train="train" :extended="false" />
           </router-link>
         </li>
@@ -64,17 +64,6 @@ export default defineComponent({
     };
   },
 
-  methods: {
-    getTrainRoute(trainId: string) {
-      return {
-        name: 'DriverView',
-        query: {
-          trainId,
-        }
-      }
-    }
-  },
-
   computed: {
     dataStatus() {
       if (this.store.isOffline) return Status.Data.Offline;

src/router/index.ts

@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/StationsView.vue'),
     props: (route) => ({
       region: route.query.region
-    })
+    }),
   },
   {
     path: '/trains',
@@ -55,7 +55,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
-    })
+    }),
   },
   {
     path: '/:catchAll(.*)',

src/store/mainStore.ts

@@ -86,6 +86,13 @@ export const useMainStore = defineStore('mainStore', {
             isSupporter: train.driverIsSupporter,
             driverLevel: train.driverLevel,
 
+            driverRouteLocation: {
+              name: 'DriverView',
+              query: {
+                trainId: train.id
+              }
+            },
+
             timetableData: timetable
               ? {
                   timetableId: timetable.timetableId,

src/typings/common.ts

@@ -1,3 +1,5 @@
+import { RouteLocationRaw } from 'vue-router';
+
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
 
@@ -70,6 +72,8 @@ export interface Train {
   isTimeout: boolean;
   isSupporter: boolean;
 
+  driverRouteLocation: RouteLocationRaw,
+
   timetableData?: {
     timetableId: number;
     category: string;