Add page titles using route meta data

Adding the page title using the route assures that each page has a set
title.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I75cdd39a1ccdfe4ac9757886e22f016188f42360

2 files changed, 18 insertions, 4 deletions

diff --git a/src/App.vue b/src/App.vue
index 56674955..d5b49329 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,11 @@
 
 <script>
 export default {
-  name: "App"
+  name: "App",
+  watch: {
+    $route: function(to) {
+      document.title = to.meta.title || "Page is Missing Title";
+    }
+  }
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 698aa700..560da89a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,19 +16,28 @@ const routes = [
     children: [
       {
         path: "",
-        component: () => import("@/views/Overview")
+        component: () => import("@/views/Overview"),
+        meta: {
+          title: "Server Overview"
+        }
       },
       {
         path: "/access-control/local-user-management",
         name: "local-users",
-        component: () => import("@/views/AccessControl/LocalUserManagement")
+        component: () => import("@/views/AccessControl/LocalUserManagement"),
+        meta: {
+          title: "Manage Local Users"
+        }
       }
     ]
   },
   {
     path: "/login",
     name: "login",
-    component: () => import("@/views/Login")
+    component: () => import("@/views/Login"),
+    meta: {
+      title: "Login"
+    }
   }
 ];