Page now changes based on route

src/components/ImageList.vue

@@ -50,25 +50,16 @@ export default {
     ...mapState(["stateUser", "stateHashArray"]),
   },
   async created() {
-    this.pageChange(this.currentPage);
-    this.lastPage = Number(await this.getTotalPages());
+    this.lastPage = Number(await this.getLastPage());
+    this.pageChange();
   },
   methods: {
-    async pageChange(pageNumber) {
-      if (pageNumber === "...") {
-        let pageNumber = Number(prompt("Jump to page"));
-        if (
-          !Number.isInteger(pageNumber) ||
-          pageNumber > this.lastPage ||
-          pageNumber < 1
-        ) {
-          alert("Invalid page!");
-          return;
-        }
-        this.updatePage(pageNumber);
-        return;
-      }
-      this.currentPage = pageNumber;
+    async pageChange() {
+      this.currentPage = Number(
+        window.location.pathname.split("/").pop().match(/^\d+$/)
+      );
+      if (this.currentPage === 0) this.currentPage++;
+      if (this.currentPage > this.lastPage) this.currentPage = this.lastPage;
       window.scrollTo(0, 0);
       this.setStateHashArray(await this.getHashArray(this.currentPage - 1));
     },
@@ -86,10 +77,10 @@ export default {
       });
       return hashArray;
     },
-    async getTotalPages() {
+    async getLastPage() {
       const response = await fetch("/api/page");
-      const totalPages = await response.text();
-      return totalPages;
+      const lastPage = await response.text();
+      return lastPage;
     },
     appendToDeleteArray(...args) {
       const [checked, hash] = args;

src/components/PaginationBar.vue

 <template>
   <div class="mx-auto max-w-max">
-    <button
+    <router-link
       v-for="(page, index) in pages"
       :key="index"
-      class="mr-2 last:mr-0 text-lg"
+      :to="`/${page}`"
+      @click.native="$emit('onPageChange')"
       :class="{
         'text-red-800': page === currentPage,
         'font-bold': page === currentPage,
       }"
-      @click="$emit('onPageChange', page)"
+      class="mr-2 last:mr-0 text-lg"
     >
       {{ page }}
-    </button>
+    </router-link>
   </div>
 </template>
 

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import ImageView from '../views/ImageView.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
+import ImageView from "../views/ImageView.vue";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: "/",
+    name: "Home",
+    component: Home,
   },
   {
-    path: '/image/:hash',
-    name: 'ImageView',
+    path: "/:page",
+    name: "Page",
+    component: Home,
+  },
+  {
+    path: "/image/:hash",
+    name: "ImageView",
     component: ImageView,
   },
-]
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;