Access route to single book form

front/src/AppNavBar.vue

@@ -1,8 +1,7 @@
 <script setup>
-  import { RouterLink } from 'vue-router'
+  import { useRouter, RouterLink } from 'vue-router'
   import NavBarSearch from './NavBarSearch.vue'
   import { useAuthStore } from './auth.store.js'
-  import { useRouter } from 'vue-router'
 
   const authStore = useAuthStore();
   const router = useRouter();

front/src/BookCard.vue

@@ -1,6 +1,8 @@
 <script setup>
+  import { useRouter } from 'vue-router'
 
   const props = defineProps({
+  id: Number,
   title: String,
   author: String,
   imagePath: String,
@@ -8,13 +10,17 @@
   read: Boolean
 });
 const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "defaultbook.png" : props.imagePath;
+const router = useRouter();
 
+function openBook() {
+  router.push(`/book/${props.id}`)
+}
 
 </script>
 
 <template>
-  <div class="box container has-background-dark">
+  <div class="box container has-background-dark" >
-    <div class="media">
+    <div class="media" @click="openBook">
       <div class="media-left">
         <figure class="image mb-3">
           <img v-bind:src="imagePathOrDefault" v-bind:alt="title">

front/src/BookListElement.vue

@@ -6,6 +6,7 @@
   const router = useRouter();
 
   const props = defineProps({
+  id: Number,
   title: String,
   author: String,
   id: Number,
@@ -23,6 +24,10 @@ async function onUserBookRead() {
   }
 }
 
+function openBook() {
+  router.push(`/book/${props.id}`)
+}
+
 </script>
 
 <template>
@@ -30,7 +35,7 @@ async function onUserBookRead() {
     <p>{{error}}</p>
   </div>
   <div class="columns no-padding box container has-background-dark">
-    <div class="media column no-margin">
+    <div class="media column no-margin" @click="openBook">
       <div class="media-left">
         <figure class="image mb-3">
           <img v-bind:src="imagePathOrDefault" v-bind:alt="title">