- recoded MetaTagUpdater.

- added metas array with metas.
- added interfaces IRouteMeta, IMeta, ITag.
- deleted metas from routes.
- modified metas by types.
- updated router index.
- up minor version.

src/router/assets/metas.ts

@@ -0,0 +1,46 @@
+import IRouteMeta from '@/router/models/IRouteMeta';
+import metaPatterns from '@/router/assets/metas/Patterns';
+import metaCustom from '@/router/assets/metas/Custom';
+import metaManual from '@/router/assets/metas/Manual';
+import metaDiagnostic from '@/router/assets/metas/Diagnostic';
+import metaFaq from '@/router/assets/metas/Faq';
+import metaAbout from '@/router/assets/metas/About';
+import metaDonate from '@/router/assets/metas/Donate';
+import meta404 from '@/router/assets/metas/404';
+
+const metas: Array<IRouteMeta> = [
+  {
+    route: '/',
+    meta: metaPatterns,
+  },
+  {
+    route: '/custom',
+    meta: metaCustom,
+  },
+  {
+    route: '/manual',
+    meta: metaManual,
+  },
+  {
+    route: '/diagnostic',
+    meta: metaDiagnostic,
+  },
+  {
+    route: '/faq',
+    meta: metaFaq,
+  },
+  {
+    route: '/about',
+    meta: metaAbout,
+  },
+  {
+    route: '/donate',
+    meta: metaDonate,
+  },
+  {
+    route: '/404',
+    meta: meta404,
+  },
+];
+
+export default metas;

src/router/assets/metas/404.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – Page not found',
   metaTags: [
     {

src/router/assets/metas/About.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – About',
   metaTags: [
     {

src/router/assets/metas/Custom.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – Custom',
   metaTags: [
     {

src/router/assets/metas/Diagnostic.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – Diagnostic',
   metaTags: [
     {

src/router/assets/metas/Donate.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – Donate',
   metaTags: [
     {

src/router/assets/metas/Faq.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – FAQ',
   metaTags: [
     {

src/router/assets/metas/Manual.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers – Manual',
   metaTags: [
     {

src/router/assets/metas/Patterns.ts

@@ -1,4 +1,6 @@
-const meta = {
+import IMeta from '@/router/models/IMeta';
+
+const meta: IMeta = {
   title: 'Wavelovers',
   metaTags: [
     {

src/router/assets/routes.ts

@@ -1,61 +1,45 @@
 import { RouteRecordRaw } from 'vue-router';
-import metaPatterns from '@/router/assets/metas/Patterns';
-import metaCustom from '@/router/assets/metas/Custom';
-import metaManual from '@/router/assets/metas/Manual';
-import metaDiagnostic from '@/router/assets/metas/Diagnostic';
-import metaFaq from '@/router/assets/metas/Faq';
-import metaAbout from '@/router/assets/metas/About';
-import metaDonate from '@/router/assets/metas/Donate';
-import meta404 from '@/router/assets/metas/404';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'patterns-view',
     component: () => import('@/views/PatternsView.vue'),
-    meta: metaPatterns,
   },
   {
     path: '/custom',
     name: 'custom-view',
     component: () => import('@/views/CustomView.vue'),
-    meta: metaCustom,
   },
   {
     path: '/manual',
     name: 'manual-view',
     component: () => import('@/views/ManualView.vue'),
-    meta: metaManual,
   },
   {
     path: '/diagnostic',
     name: 'diagnostic-view',
     component: () => import('@/views/DiagnosticView.vue'),
-    meta: metaDiagnostic,
   },
   {
     path: '/faq',
     name: 'faq-view',
     component: () => import('@/views/FaqView.vue'),
-    meta: metaFaq,
   },
   {
     path: '/about',
     name: 'about-view',
     component: () => import('@/views/AboutView.vue'),
-    meta: metaAbout,
   },
   {
     path: '/donate',
     name: 'donate-view',
     component: () => import('@/views/DonateView.vue'),
-    meta: metaDonate,
   },
   {
     path: '/404',
     name: '404',
     component: () => import('@/views/NotFoundView.vue'),
-    meta: meta404,
   },
   {
     path: '/:catchAll(.*)*',

src/router/index.ts

@@ -6,6 +6,7 @@ import QueryRouter from '@/router/modules/QueryRouter';
 import MetaTagUpdater from '@/router/modules/MetaTagUpdater';
 import routes from '@/router/assets/routes';
 import queries from '@/router/assets/queries';
+import metas from '@/router/assets/metas';
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
@@ -18,7 +19,7 @@ router.beforeEach((
   next: NavigationGuardNext
 ) => {
   QueryRouter.update(to, from, next, router, queries);
-  MetaTagUpdater.update(to, from, next)
+  MetaTagUpdater.update(to, from, next, metas)
 });
 
 export default router;

src/router/models/IMeta.ts

@@ -0,0 +1,9 @@
+import ITag from '@/router/models/ITag';
+
+interface IMeta {
+  title: string;
+  metaTags: Array<ITag>;
+  linkTags: Array<ITag>;
+}
+
+export default IMeta;

src/router/models/IRouteMeta.ts

@@ -0,0 +1,8 @@
+import IMeta from '@/router/models/IMeta';
+
+interface IRouteMeta {
+  route: string;
+  meta: IMeta;
+}
+
+export default IRouteMeta;

src/router/models/ITag.ts

@@ -0,0 +1,5 @@
+interface ITag {
+  [key: string]: string;
+}
+
+export default ITag;

src/router/modules/MetaTagUpdater.ts

@@ -1,6 +1,6 @@
-import {
-  NavigationGuardNext, RouteLocationNormalized, RouteRecordNormalized
-} from "vue-router";
+import { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
+import IRouteMeta from "@/router/models/IRouteMeta";
+import ITag from '@/router/models/ITag';
 
 function appendTags(tagsArray: object[], type: string) {
   tagsArray.map(
@@ -21,7 +21,8 @@ function appendTags(tagsArray: object[], type: string) {
 function updateMetatag(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
-  next: NavigationGuardNext
+  next: NavigationGuardNext,
+  metas: Array<IRouteMeta>
 ) {
   Array.from(document.querySelectorAll('[data-vue-router-controlled]'))
     .map(el => {
@@ -30,27 +31,23 @@ function updateMetatag(
       }
     });
 
-  const hasTitle: RouteRecordNormalized =
-    to.matched.slice().reverse()
-      .find(r => r.meta && r.meta.title) as RouteRecordNormalized;
-  const hasMetas: RouteRecordNormalized =
-    to.matched.slice().reverse()
-      .find(r => r.meta && r.meta.metaTags) as RouteRecordNormalized;
-  const hasLinks: RouteRecordNormalized =
-    to.matched.slice().reverse()
-      .find(r => r.meta && r.meta.linkTags) as RouteRecordNormalized;
+  let title: string = '' as string;
+  let metaTags: Array<ITag> = [] as Array<ITag>;
+  let linkTags: Array<ITag> = [] as Array<ITag>;
 
-  if (hasTitle) {
-    document.title = hasTitle.meta.title as string;
-  }
-  if (hasMetas) {
-    const metaTags: object[] = hasMetas.meta.metaTags as object[];
-    appendTags(metaTags, 'meta');
-  }
-  if (hasLinks) {
-    const linkTags: object[] = hasLinks.meta.linkTags as object[];
-    appendTags(linkTags, 'link');
-  }
+  metas.forEach((item) => {
+    if (item.route === to.fullPath) {
+      if (item.meta) {
+        title = item.meta.title;
+        metaTags = item.meta.metaTags;
+        linkTags = item.meta.linkTags;
+      }
+    }
+  });
+
+  if (title) document.title = title;
+  if (metaTags) appendTags(metaTags, 'meta');
+  if (linkTags) appendTags(linkTags, 'link');
 
   return next();
 }