Set page title with Vue Router

In your <h1></h1> tag, just use the following

{{ $route.meta.title }}

If you would like to have correct browser history use this one:

router.afterEach((to, from) => {
  Vue.nextTick( () => {
    document.title = to.meta.title ? to.meta.title : 'default title';
  });
})

Also if you need to change the document's title-tag, in your router.beforeEach replace this line :

this.$emit('pagetitle', to.meta.title);

with

document.title = to.meta.title;

It will work.

Related