Access route to single book form

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="media">
+  <div class="box container has-background-dark" >
+    <div class="media" @click="openBook">
       <div class="media-left">
         <figure class="image mb-3">
           <img v-bind:src="imagePathOrDefault" v-bind:alt="title">