url query params for character list page number

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>