new router

frontend/src/App.vue

@@ -8,11 +8,6 @@ import { api } from '@/http-api'
 import { ImageType, ImageClass } from './image';
 </script>
 <script lang="ts">
-const routes: { [key: string]: string } = {
-	'/': "Home",
-	'Gallery': "Gallery",
-	'Upload': "Upload"
-}
 export default defineComponent({
 	components: {
 		Home,
@@ -24,15 +19,9 @@ export default defineComponent({
 		return {
 			images: new Map<Number, ImageType>(),
 			currentPath: window.location.hash,
-			sent: false,
 			file: null as FileList | null
 		}
 	},
-	computed: {
-		currentView(): string {
-			return routes[this.currentPath.slice(1) || '/'] || "notFound";
-		}
-	},
 	methods: {
 		async updateImageList(sleep: number) {
 			setTimeout(() => {
@@ -48,21 +37,10 @@ export default defineComponent({
 			api.deleteImage(id).then(() => {
 				this.updateImageList(100);
 			})
-		},
-		isActive(route: string) {
-			if (route === undefined) {
-				if (this.currentPath === "")
-					return 'router active';
-				route = "/";
-			}
-			return this.currentPath.endsWith(route) ? 'router active' : 'router';
 		}
 	},
-	mounted() {
+	created() {
 		this.updateImageList(0);
-		window.addEventListener('hashchange', () => {
-			this.currentPath = window.location.hash;
-		});
 	}
 })
 </script>
@@ -71,15 +49,16 @@ export default defineComponent({
 		<div class="navi">
 			<nav>
 				<ul>
-					<li v-for="route in routes" :class="isActive(routes[route])">
-						<a :href="'#' + (routes[route] || '/')"> <span>{{ route }}</span></a>
-					</li>
+					<li><router-link to="/">Home</router-link></li>
+					<li><router-link to="/gallery">Gallery</router-link></li>
+					<li><router-link to="/upload">Upload</router-link></li>
 				</ul>
 			</nav>
 		</div>
 	</header>
-	<component :is="currentView" :key="sent" :images="images" @delete="deleteFile"
-		@updateImageList="updateImageList(100)" />
+	<div class="content">
+		<RouterView :images="images" @delete="deleteFile" @updateImageList="updateImageList(100)" />
+	</div>
 </template>
 <style scoped>
 .navi {
@@ -103,24 +82,28 @@ ul>li+li {
 	margin-left: 30px;
 }
 
+.content {
+	margin-top: 100px;
+}
+
 ul>li {
 	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: 5px 15px;
-	border-radius: 60px;
 }
 
-.active {
+.router-link-active {
 	background-color: #646cff;
 }
 
-.active>a {
+.router-link-active>a {
 	color: rgb(205, 201, 194);
 }
 
 a {
+	padding: 5px 15px;
+	border-radius: 60px;
 	color: rgb(172, 165, 154);
 	text-decoration: none;
 	font-family: "Aeonik", sans-serif;

frontend/src/main.ts

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

frontend/src/router/index.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: '/',
+			name: 'home',
+			component: () => import('../components/Home.vue')
+		},
+		{
+			path: '/gallery',
+			name: 'gallery',
+			component: () => import('../components/Gallery.vue')
+		},
+		{
+			path: '/upload',
+			name: "upload",
+			component: () => import('../components/Upload.vue')
+		}
+	]
+})
+
+export default router

frontend/src/style.css

@@ -4,7 +4,7 @@
 	line-height: 24px;
 	font-weight: 400;
 
-	color-scheme: light dark;
+	color-scheme: dark;
 	color: rgba(255, 255, 255, 0.87);
 	background-color: #242424;
 
@@ -56,12 +56,7 @@ input:focus+label {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
-.card {
-	padding: 2em;
-}
-
 #app {
-	max-width: 1280px;
 	margin: 0 auto;
 	padding: 2rem;
 	text-align: center;