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

src/components/TrainsView/TrainTable.vue

@@ -17,11 +17,10 @@
           class="train-row"
           v-for="train in trains"
           :key="train.id"
-          tabindex="0"
-          @click.stop="driverMixin_showDriverView(train.id)"
-          @keydown.enter="driverMixin_showDriverView(train.id)"
         >
-          <TrainInfo :train="train" :extended="false" />
+          <router-link class="block-link" :to="getTrainRoute(train.id)">
+            <TrainInfo :train="train" :extended="false" />
+          </router-link>
         </li>
       </transition-group>
     </div>
@@ -35,13 +34,10 @@ import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
 import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
-import driverViewMixin from '../../mixins/driverViewMixin';
 
 export default defineComponent({
   components: { Loading, TrainInfo },
 
-  mixins: [driverViewMixin],
-
   props: {
     trains: {
       type: Array as PropType<Train[]>,
@@ -68,6 +64,17 @@ export default defineComponent({
     };
   },
 
+  methods: {
+    getTrainRoute(trainId: string) {
+      return {
+        name: 'DriverView',
+        query: {
+          trainId,
+        }
+      }
+    }
+  },
+
   computed: {
     dataStatus() {
       if (this.store.isOffline) return Status.Data.Offline;
@@ -107,7 +114,5 @@ li.train-row {
   background-color: var(--clr-secondary);
   margin-bottom: 1em;
   width: 100%;
-
-  cursor: pointer;
 }
 </style>

src/styles/global.scss

@@ -123,7 +123,7 @@ input {
   border-radius: 50%;
 }
 
-a {
+a:not(.block-link) {
   display: inline-block;
 
   color: white;
@@ -138,6 +138,13 @@ a {
   }
 }
 
+a.block-link {
+  display: block;
+
+  color: inherit;
+  text-decoration: none;
+}
+
 ul {
   padding: 0;
   list-style: none;