spanish-quizzer

commit 93563039001002d00033e9062817c594f8c83ae0
parent 70a9004526d5d64f1d9be898a8a96872f5a39d91
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri, 12 Mar 2021 13:15:23 -0800

Make page title dynamic

Diffstat:
M
js/app.js
 | 
58
+++++++++++++++++++++++++++++++++++++++++++++++++++-------

1 file changed, 51 insertions(+), 7 deletions(-)
diff --git a/js/app.js b/js/app.js
@@ -89,13 +89,46 @@ function loadVue() {
 
         router: new VueRouter({
             routes: [
-                { path: "/", redirect: "/home" },
-                { path: "/home",      name: "home",      component: homePage },
-                { path: "/verbs",     name: "verbs",     component: filtersPage, props: {category: "verbs"}},
-                { path: "/vocab",     name: "vocab",     component: filtersPage, props: {category: "vocab"}},
-                { path: "/quizzer",   name: "quizzer",   component: quizzerPage,  props:true },
-                { path: "/reference", name: "reference", component: referencePage },
-                { path: "*", redirect: "/home" },
+                {
+                    path: "/",
+                    redirect: "/home"
+                },
+                {
+                    path: "/home",
+                    name: "home",
+                    component: homePage
+                },
+                {
+                    path: "/verbs",
+                    name: "verbs",
+                    meta: { title: "Verb Filters" },
+                    component: filtersPage,
+                    props: { category: "verbs" }
+                },
+                {
+                    path: "/vocab",
+                    name: "vocab",
+                    meta: { title: "Vocab Filters" },
+                    component: filtersPage,
+                    props: { category: "vocab" }
+                },
+                {
+                    path: "/quizzer",
+                    name: "quizzer",
+                    meta: { title: "Quizzer" },
+                    component: quizzerPage,
+                    props: true
+                },
+                {
+                    path: "/reference",
+                    name: "reference",
+                    meta: { title: "Reference Tables" },
+                    component: referencePage
+                },
+                {
+                    path: "*",
+                    redirect: "/home"
+                },
             ],
         }),
 
@@ -130,9 +163,20 @@ function loadVue() {
             data: {}
         },
 
+        watch: {
+            $route: function(to, from) {
+                if (to.meta.title) document.title = to.meta.title + " - Spanish-Quizzer";
+                else document.title = "Spanish-Quizzer";
+            }
+        },
+
         created: function() {
             // Add keyup handler
             window.addEventListener("keyup", this.keyup);
+
+            // Set page title
+            if (this.$route.meta.title) document.title = this.$route.meta.title + " - Spanish-Quizzer";
+            else document.title = "Spanish-Quizzer";
         },
 
         destroyed: function() {