Add route to get a particular book

front/src/BookForm.vue

@@ -0,0 +1,32 @@
+<script setup>
+  import { getBook } from './api.js'
+  import { onBeforeRouteUpdate } from 'vue-router'
+
+  const props = defineProps({
+  id: String
+});
+
+  let { data, error } = getBook(props.id);
+
+  onBeforeRouteUpdate(async (to, from) => {
+    let res = getBook(to.params.id);
+    data = res.data;
+    error = res.error;
+  })
+
+</script>
+
+<template>
+  <div>
+    <pre>{{ data }}</pre>
+  </div>
+</template>
+
+<style scoped>
+img {
+  max-height:500px;
+  max-width:500px;
+  height:auto;
+  width:auto;
+}
+</style>

front/src/api.js

@@ -32,6 +32,10 @@ export function getSearchBooks(searchterm) {
   return useFetch(baseUrl + '/search/' + searchterm);
 }
 
+export function getBook(id) {
+  return useFetch(baseUrl + '/book/' + id);
+}
+
 export function postBook(book) {
   return genericPostCall('/book', book.value)
 }

front/src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import BooksBrowser from './BooksBrowser.vue'
 import AddBook from './AddBook.vue'
+import BookForm from './BookForm.vue'
 import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'
@@ -11,10 +12,12 @@ import { useAuthStore } from './auth.store'
 const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
+  { path: '/book/:id', component: BookForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
   { path: '/login', component: LogIn },
+  { path: '/book', component: LogIn },
 ]
 
 export const router = createRouter({