init

src/router/index.ts

@@ -1,11 +1,23 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { RouteRecordRaw } from "vue-router";
+// NP
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+NProgress.configure({ easing: "ease", speed: 500, showSpinner: false });
+NProgress.inc(0.2);
+// End
 import Home from "../views/Home.vue";
-const routes = [
+const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "Home",
     component: Home,
   },
+  {
+    path: "/about",
+    name: "About",
+    component: () => import("@/views/About.vue"),
+  },
 ];
 
 // createRouter
@@ -14,4 +26,13 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach((to, from, next) => {
+  NProgress.start();
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
+
 export default router;