Update todo

3-todo/package-lock.json

@@ -7418,6 +7418,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11160,6 +11165,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
+      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

3-todo/package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "core-js": "^3.19.1",
+    "moment": "^2.29.1",
     "vue": "^2.6.14",
+    "vue-router": "^3.2.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.15",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.0.0-beta",

3-todo/src/App.vue

 <template>
-	<TaskList />
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Todo</router-link> |
+      <router-link to="/time">Time</router-link>
+    </div>
+    <router-view/>
+  </div>
 </template>
 
-<script>
-	import TaskList from '@/components/Task/TaskList.vue';
-
-export default {
-  name: 'App',
-  components: {
-    TaskList
-  }
-}
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -20,6 +15,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

3-todo/src/components/Time.vue

+<template>
+  <div>
+    <p>{{ time }}</p>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  name: "Time",
+  components: {},
+  computed: {},
+  data() {
+    return {
+      time: moment().format("hh:mm:ss "),
+    };
+  },
+  methods: {
+    second() {
+      setInterval(() => {
+        this.time = moment().format("hh:mm:ss ");
+      }, 1000);
+    },
+  },
+  created() {
+    this.second();
+  },
+};
+</script>
+
+<style >
+p {
+  font-size: 10rem;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file

3-todo/src/main.js

@@ -2,12 +2,14 @@ import Vue from 'vue';
 import App from './App.vue';
 import store from '@/store';
 import 'bootstrap/dist/css/bootstrap.css'
+import router from './router'
 
 
 Vue.config.productionTip = false;
 
 new Vue({
-	store,
-	render: h => h(App)
+    store,
+    router,
+    render: h => h(App)
 }).$mount('#app');
 

3-todo/src/router/index.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import TaskList from '@/components/Task/TaskList.vue'
+import Time from '@/components/Time.vue'
+
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Todo',
+    component: TaskList
+  },
+  {
+    path: '/time',
+    name: 'time',
+    component: Time
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

3-todo/src/views/About.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

3-todo/src/views/Home.vue

+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  }
+}
+</script>