- added router module for route by query.

- added router module for add metatags.
- fix filepath for imports in main.ts.

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
+import App from '@/App.vue';
+import router from '@/router';
+import store from '@/store';
 
 createApp(App).use(store).use(router).mount('#app');
 

src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import PatternsView from '@/views/PatternsView.vue';
+import VueRouterQueryRoutes from '@/router/modules/VueRouterQueryRoute';
+import VueRouterMetaTags from '@/router/modules/VueRouterMetaTags';
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -38,5 +40,8 @@ const router = createRouter({
     routes,
 });
 
+router.beforeEach(VueRouterQueryRoutes.update);
+router.beforeEach(VueRouterMetaTags.update);
+
 export default router;
 

src/router/modules/VueRouterMetaTags.ts

@@ -0,0 +1,48 @@
+import { NavigationGuardNext, RouteLocationNormalized, RouteRecordNormalized } from "vue-router";
+
+function appendTags(tagsArray: object[], type: string) {
+    tagsArray.map((meta: object) => {
+        const tag = document.createElement(type);
+        (Object.keys(meta) as Array<keyof typeof meta>)
+            .forEach((key) => {
+                tag.setAttribute(key, meta[key] as string);
+            });
+        tag.setAttribute('data-vue-router-controlled', '');
+        return tag;
+    }).forEach(tag => document.head.appendChild(tag));
+}
+
+function updateMetatag(
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext
+) {
+    const nearestWithTitle: RouteRecordNormalized =
+        to.matched.slice().reverse()
+            .find(r => r.meta && r.meta.title) as RouteRecordNormalized;
+    const nearestWithMeta: RouteRecordNormalized =
+        to.matched.slice().reverse()
+            .find(r => r.meta && r.meta.metaTags && r.meta.linkTags) as RouteRecordNormalized;
+    if (nearestWithTitle) {
+        document.title = nearestWithTitle.meta.title as string;
+    }
+    Array.from(document.querySelectorAll('[data-vue-router-controlled]'))
+        .map(el => {
+            if (el.parentNode) {
+                el.parentNode.removeChild(el);
+            }
+        });
+    if (!nearestWithMeta) return next();
+    const linkTags: object[] = nearestWithMeta.meta.linkTags as object[];
+    const metaTags: object[] = nearestWithMeta.meta.metaTags as object[];
+    appendTags(linkTags, 'link');
+    appendTags(metaTags, 'meta');
+    return next();
+}
+
+const VueRouterMetaTags = {
+    update: updateMetatag,
+};
+
+export default VueRouterMetaTags;
+

src/router/modules/VueRouterQueryRoute.ts

@@ -0,0 +1,28 @@
+import router from '@/router';
+import { NavigationGuardNext, RouteLocationNormalized, RouteRecordNormalized } from "vue-router";
+
+function updateRoute(
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext
+) {
+    switch (to.fullPath) {
+        case '/?custom':
+            router.push('/custom');
+            break;
+        case '/?manual':
+            router.push('/manual');
+            break;
+        case '/?diagnostic':
+            router.push('/diagnostic');
+            break;
+    }
+    return next();
+}
+
+const VueRouterQueryRoutes = {
+    update: updateRoute,
+};
+
+export default VueRouterQueryRoutes;
+