feat: working SPA

src/views/ArticleView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MarkdownData } from '@interfaces'
+import { ref, onBeforeMount } from 'vue'
+import { loadArticle } from '@lib/articles'
+import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
+import NotFoundView from './NotFoundView.vue'
+
+const markdownData = ref<MarkdownData | null>(null)
+const route = useRoute()
+const articleDate = ref<Date>(new Date())
+
+async function loadPage(target: RouteLocation) {
+  articleDate.value = new Date(
+    parseInt(target.params.year),
+    parseInt(target.params.month) - 1,
+    parseInt(target.params.day),
+  )
+  markdownData.value = await loadArticle(
+    articleDate.value.getFullYear(),
+    articleDate.value.getMonth() + 1,
+    articleDate.value.getDate(),
+  )
+}
+
+onBeforeMount(() => loadPage(route))
+onBeforeRouteUpdate(loadPage)
+</script>
+
+<template>
+  <template v-if="!markdownData">
+    <NotFoundView />
+  </template>
+  <template v-else>
+    <h1>ArticleView - {{ articleDate }}</h1>
+    <div v-html="markdownData.html"></div>
+  </template>
+</template>
+
+<style scoped></style>