From 665bc3b679d87e3f7fc6902b13524d96d2bbe926 Mon Sep 17 00:00:00 2001
From: Trirst <abeces968@gmail.com>
Date: Wed, 28 Jul 2021 01:50:09 +0700
Subject: [PATCH] Page now changes based on route
---
src/components/ImageList.vue | 31 ++++++++++------------------
src/components/PaginationBar.vue | 9 ++++----
src/router/index.js | 35 ++++++++++++++++++--------------
3 files changed, 36 insertions(+), 39 deletions(-)
diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue
index 8c0f348..83f6127 100644
--- a/src/components/ImageList.vue
+++ b/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;
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 558bf2b..e8bd160 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -1,17 +1,18 @@
<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>
diff --git a/src/router/index.js b/src/router/index.js
index 8334be1..36c3ea8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,27 +1,32 @@
-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;
--
GitLab