check task exist and when page not found redirect page 404

src/components/Error/404.vue

+<template>
+    <div class="container text-center mt-5">
+        <h1>404</h1>
+        <p>page not found.</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style scoped>
+    h1{
+        font-size: 100px;
+    }
+
+    p{
+        font-size: 25px;
+    }
+</style>
\ No newline at end of file

src/components/editTask.vue

@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import Vue from 'vue';
-import VueAlertify from 'vue-alertify';
+import Vue from "vue";
+import VueAlertify from "vue-alertify";
 
 Vue.use(VueAlertify);
 
@@ -41,8 +41,14 @@ export default {
   created: function () {
     if (localStorage.getItem("tasks")) {
       this.tasks = JSON.parse(localStorage.getItem("tasks"));
+    }
+    
+    if (this.tasks[this.id]) {
       this.selected = this.tasks[this.id].status;
       this.task = this.tasks[this.id].name;
+    } else {
+      this.$router.push("/");
+      this.$alertify.error('Task not found!');
     }
   },
 
@@ -69,7 +75,7 @@ export default {
       localStorage.setItem("tasks", JSON.stringify(this.tasks));
       this.task = null;
       this.$router.push("/");
-      this.$alertify.warning('Edit task successfully');
+      this.$alertify.warning("Edit task successfully");
     },
   },
 };

src/routes.js

 import Task from './components/Task.vue';
 import addTask from './components/addTask.vue';
 import editTask from './components/editTask.vue';
+import Error404 from './components/Error/404.vue';
 
 export const routes = [
     { path: '/', name: 'Task', component: Task },
     { path: '/task/add', name: 'addTask', component: addTask },
-    { path: '/task/edit/:id', name: 'editTask', component: editTask }
+    { path: '/task/edit/:id', name: 'editTask', component: editTask },
+    { path: '/404', name: 'Error404', component: Error404 },
+    { path: '*', redirect: '/404' },
 ];
\ No newline at end of file