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
diff --git a/src/App.vue b/src/App.vue
index 5667495..d5b4932 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 698aa70..560da89 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,19 +16,28 @@
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"
+ }
}
];