[U] Titles

2021-12-25 15:57:29 -05:00
parent 8b2a2dda4a
commit fbaf5a04ca
3 changed files with 14 additions and 1 deletions
@@ -5,7 +5,7 @@
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1.0" name="viewport">
  <link href="<%= BASE_URL %>favicon.ico" rel="icon">
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title>Home</title>
 </head>
 <body>
 <noscript>
@@ -51,6 +51,13 @@ export default class App extends Vue

    updateBookmark(to: RouteLocationNormalized): void
    {
+        // Update title
+        // Use next tick to handle router history correctly
+        // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
+        this.$nextTick(() => {
+            document.title = to.meta.title ? `Hykilpikonna - ${to.meta.title}` : 'Hykilpikonna - Home';
+        })
+
        console.log('AfterEach called', to)
        this.currentRoute = (to.name as string).toLowerCase()

@@ -5,16 +5,19 @@ const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
+        meta: {title: 'Home'},
        component: Home
    },
    {
        path: '/new-home',
        name: 'New Home',
+        meta: {title: 'Home'},
        component: () => import('../views/NewHome.vue')
    },
    {
        path: '/about',
        name: 'About',
+        meta: {title: 'About Me'},
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
@@ -23,16 +26,19 @@ const routes: Array<RouteRecordRaw> = [
    {
        path: '/life',
        name: 'Life',
+        meta: {title: 'Life'},
        component: () => import('../views/Life.vue')
    },
    {
        path: '/color',
        name: 'ColorPicker',
+        meta: {title: 'Color Picker'},
        component: () => import('../components/color/ColorPickerTest.vue')
    },
    {
        path: '/projects',
        name: 'Projects',
+        meta: {title: 'Projects'},
        component: () => import('../views/Projects.vue')
    }
 ]