feat: add 404

src/pages/NotFound.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="container">
+    <h1>Not Found</h1>
+    <p>Sorry, the page you are looking for does not exist.</p>
+    <router-link to="/">
+      Go to Home
+    </router-link>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/pages/Post.vue

@@ -1,16 +1,21 @@
 <script setup>
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { ref, watchEffect } from 'vue';
 
 import * as posts from '../../docs/diary/*.md';
 
 const route = useRoute();
+const router = useRouter();
 
 const slug = route.params.slug;
 const markdown = ref(null);
 
 watchEffect(async () => {
-  markdown.value = posts[slug].default;
+  const post = posts[slug];
+  if (!post)
+    return router.replace('/404');
+
+  markdown.value = post.default;
 });
 </script>
 

src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Index from './pages/Index.vue';
 import Post from './pages/Post.vue';
 import Posts from './pages/Posts.vue';
+import PageNotFound from './pages/NotFound.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -10,6 +11,7 @@ const router = createRouter({
     { path: '/practice', name: 'Practice', component: Index },
     { path: '/posts/', name: 'Posts', component: Posts },
     { path: '/posts/:slug', name: 'Post', component: Post },
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: PageNotFound },
   ],
 });