url query params for character list page number

frontend/src/vues/CharacterDetails.vue

@@ -10,13 +10,27 @@
     </div>
     <div>Last Game: {{ lastPlayedPostDate }}</div>
     <div class="d-flex flex-row">
-    <GameTable title="Games Played" :gameList="games.played"></GameTable>
-    <game-table title="Games Applied" :gameList="games.applied"></game-table>
-  </div>
+      <div class="flex-column game-list">
+        <h3 class="game-list-title">Games Played</h3>
+        <GameTable :gameList="games.played"></GameTable>
+      </div>
+      <div class="flex-column game-list">
+        <h3 class="game-list-title">Games Applied</h3>
+        <game-table :gameList="games.applied"></game-table>
+      </div>
+    </div>
   </v-container>
 </template>
 
-<style></style>
+<style>
+  .game-list {
+    margin: 20px;
+    margin-top: 25px;
+  }
+  .game-list-title{
+    margin-bottom: 10px;
+  }
+</style>
 
 <script setup lang="ts">
 import GameTable from './GameTable.vue'

frontend/src/vues/CharacterList.vue

@@ -27,30 +27,29 @@
     </tbody>
   </v-table>
   <v-pagination
+    :model-value="page"
     :length="pageCount"
-    @prev="previousPage()"
-    @next="nextPage()"
     @update:modelValue="setPage($event)"
   ></v-pagination>
-  <button @click="previousPage()">pp</button>
-  <button @click="nextPage()">np</button>
 </template>
 
 <style type="text/css"></style>
 
 <script setup lang="ts">
 import { onMounted, onCreated, ref } from 'vue'
-import { Game, useGameStore } from '../store/gamestore'
 import axios from 'axios'
 
-let page = 0
+const route = useRoute()
+const router = useRouter()
+
 let count = 10
 const characters = ref({})
 const pageCount = ref(1)
+const page = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/character', {
-    page: `${page}`,
+    page: `${page.value-1}`,
     count: `${count}`,
     orderBy: 'id'
   })
@@ -59,22 +58,21 @@ async function loadData() {
   pageCount.value = response.data.pageCount
 }
 
-function previousPage() {
-  page--
-  loadData()
-}
-
-function nextPage() {
-  page++
-  loadData()
-}
-
 function setPage(targetPage: number) {
-  this.page = targetPage - 1
-  loadData()
+  console.log(targetPage)
+  router.replace({query: {page: targetPage}})
 }
 
+watch(route, (newValue, oldValue) => {
+  page.value = Number(route.query.page)
+  loadData()
+})
+
 onMounted(async () => {
+  if(!route.query.page){
+    router.replace({query: {page: 1}})
+  }
+  page.value = Number(route.query.page)
   loadData()
 })
 </script>

frontend/src/vues/GameDetails.vue

@@ -1,3 +1,4 @@
+<template>
   <div class="game-title-box">
     <h1>#{{ game.id }} - {{ game.title }}</h1>
   </div>