- refactoring code

src/router/index.js

@@ -1,62 +1,76 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
+import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';
 
 const Home = () => import('@/views/HomeView.vue');
 const About = () => import('@/views/AboutView.vue');
 const Projects = () => import('@/views/ProjectsView.vue');
 const Project = () => import('@/views/ProjectView.vue');
 const Contact = () => import('@/views/ContactView.vue');
-const NotFound = () => import('@/views/NotFound.vue');
+const NotFound = () => import('@/views/NotFoundView.vue');
 
-const mainTitle = 'kamilcraft.com'
+const mainTitle = 'kamilcraft.com';
 
 const routes = [
   {
     path: '/',
     name: 'Home',
     meta: {
-      title: 'Dzień dobry! 😊'
+      title: 'Dzień dobry! 😊',
+      description: [
+        'Chciałbym Państwa powitać na mojej stronie!',
+        'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.',
+      ],
     },
-    component: Home
+    component: Home,
   },
   {
     path: '/projects',
     name: 'Projects',
     meta: {
-      title: 'Moje projekty'
+      title: 'Moje projekty',
+      description: [
+        'Witam Państwa na podstronie z moimi projektami!',
+      ],
     },
-    component: Projects
+    component: Projects,
   },
   {
     path: '/projects/:id',
     name: 'Project',
     meta: {
-      title: 'Projekt'
+      title: 'Projekt',
     },
-    component: Project
+    component: Project,
   },
   {
     path: '/about',
     name: 'About',
     meta: {
-      title: 'O mnie'
+      title: 'O mnie',
+      description: [
+        'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
+      ],
     },
-    component: About
+    component: About,
   },
   {
     path: '/contact',
     name: 'Kontakt',
     meta: {
-      title: 'Kontakt'
+      title: 'Kontakt',
+      description: [
+        'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!',
+      ],
     },
-    component: Contact
+    component: Contact,
   },
   {
-    path: '/:catchAll(.*)',
+    path: '/:pathMatch(.*)*',
     name: '404',
     meta: {
-      title: 'Błąd 404'
+      title: 'Błąd 404',
     },
-    component: NotFound
+    component: NotFound,
   }
 ]
 
@@ -65,26 +79,34 @@ const router = createRouter({
   routes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
-      return savedPosition
+      return savedPosition;
     } else if (to.hash) {
       return new Promise(resolve => {
         setTimeout(() => {
           resolve({
             selector: to.hash
-          }, 1000)
-        })
-      })
+          }, 1000);
+        });
+      });
     } else {
-      return { left: 0, top: 0 }
+      return { left: 0, top: 0 };
     }
   }
-})
+});
 
-const title = ' :: ' + mainTitle
+const title = ' :: ' + mainTitle;
 router.beforeEach((to, form, next) => {
-  const documentTitle = to.meta.title + title || mainTitle
-  document.title = documentTitle === to.meta.title ? title : documentTitle
-  next()
-})
+  const documentTitle = to.meta.title + title || mainTitle;
+  document.title = documentTitle === to.meta.title ? title : documentTitle;
+  if (to.meta.title) {
+    setHeaderTitle(to.meta.title);
+  }
+  if (to.meta.description && to.meta.description !== []) {
+    setHeaderDescription(to.meta.description);
+  } else {
+    clearHeaderDescription();
+  }
+  next();
+});
 
-export default router
+export default router;