Accessing route VM within router hooks for updating document.title

[frolic]

I'd like to change the page title on route changes for better history management. I thought to do this in the afterEach router hook, using a data property on the VM (computed or otherwise). However, I can't find a good way to access the <router-view> VM from within this hook.

Any alternatives you would suggest?

[frolic]

I thought I'd try something like:

<router-view v-ref="view"></router-view>

And then watch for a property on the VM reference:

// root Vue app
new Vue({
  watch: {
    '$.view.title': function (title) {
      document.title = title
    }
  }
})

But this doesn't work. I also tried a computed property, with no luck:

// root Vue app
new Vue({
  computed: {
    title: function () {
      return this.$.view && this.$.view.title
    }
  },
  watch: {
    'title': function (title) {
      document.title = title
    }
  }
})

Ultimately, I found that if I watch the $route property from the root VM, then add a title watcher to the router VM via this.$.view.$watch, it works. But I have to manually manage watchers (removing the previous one before adding a new one) and I don't get the first title on page initialization ($route seems to be set before this.$.view is available, so immediate: true fires with an empty this.$.view).

[JosephSilber]

I think document title (and history title) support should really be built in to the router.

[frolic]

Agreed @JosephSilber. Ideally it would allow for a computed property on the router view so that the router view's component can update the title dynamically (e.g. unread count on an inbox).

[frolic]

I think I found a better solution than the one I mentioned above, via a mixin for my route components:

module.exports = {
    watch: {
        title: {
            immediate: true,
            handler: function (title) {
                if (title) {
                    document.title = title
                }
            }
        }
    }
}

But I do think that this should be built in to the router in some way.

[yyx990803]

What's wrong with setting document.title in activate or data hook?

[JosephSilber]

That wouldn't affect the history entry.

[frolic]

@yyx990803 I didn't want to have to include it with every single route component (mixins previously did not extend to the route object) and I want to be able to get the title value from the current <router-view> VM.

[atinux]

Hi,

I got the same issue but after some research I found 2 way of doing it, you can see my full answer on the vue.js forum: http://forum.vuejs.org/topic/563/how-can-i-access-a-child-router-views-data-in-a-parent-component/6

Here a demo: https://output.jsbin.com/cihizi/5/#!/arron
It's updating the title and the description tag.
Code: https://jsbin.com/cihizi/5/edit?html,js

Hope it helped :)

[lepture]

close this issue via #279

<router-view @route-data-loaded="changeTitle"></router-view>

export default {
  methods: {
    changeTitle(vm) {
        document.title = vm.docTitle
    }
  }
}

[taoeffect]

So I just tried @lepture's suggestion with vue 1.0.17 and it doesn't work. No messages are logged to the console either, indicating the event isn't emitted?

<template>
  <div>
    <header>
      <div class="groupincome-logo">
        <img class="black" src="/images/groupincome-logo-black.png">
      </div>
      <nav>
        <ul>
          <li><a v-link="'/new-user'">New User</a></li>
          <li><a v-link="'/user'">User Profile</a></li>
          <li><a v-link="'/ejs-page'">EJS page test</a></li>
        </ul>
      </nav>
    </header>
    <div class="container">
      <!-- change page title via: https://github.com/vuejs/vue-router/issues/112#issuecomment-173184057 -->
      <router-view @route-data-loaded="changeTitle"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    changeTitle(vm) {
      console.log('changeTitle called')
      if (vm.pageTitle) {
        console.log('changing title to:', vm.pageTitle)
        document.title = vm.pageTitle
      }
    }
  }
}
</script>

Help? Problem on my end or a new bug?

[taoeffect]

FWIW the suggestions at the bottom here (linked to by @atinux) work, and this seems to be a perfectly elegant solution for changing the title.

It involves moving what would normally be in App.vue's <template> into the root index.html, and using a blank App instance on the router:

var App = Vue.extend({})
router.start(App, 'html')

I think I prefer this method anyway as it saves having an extra (and unnecessary) file.