CODEWITHSUNDEEP
javascriptlaravelvue.jsvue-router
angelique000
angelique000

Reputation: 909

Set page title with Vue Router

I have created a vue-router with a page title (h1). Every vue-router link has a meta-title. How can I dynamically set my h1 page title?

I have tried $emit, but this is not working in my router. How can I change my page title?

const dashboard = {
  template: `<div>DASHBOARD</div>`
}
const about = {
  template: `<div>ABOUT</div>`
}

const routes = [
  {path: '/dashboard', component: dashboard, name:'dashboard', meta: { title: 'Dashboard' }},
  {path: '/about', component: about, name:'about', meta: { title: 'About' }}
]
const router = new VueRouter({
  routes // short for routes: routes
})

router.beforeEach((to, from, next) => {
  this.$emit('pagetitle', to.meta.title); // DOESN'T WORK!!
  next();
});

new Vue({
  el: '#app',
  router,
  data() {
    return {
      pagetitle: 'not set'
    }
  },
  watch: {
    '$route': function(value) {
    // I can use things like value.name === 'about', but "watch" doesn't set the page title at the first page load.
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link to="/dashboard">Dashboard</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
  <h1 v-text="pagetitle"></h1>
  How can I change the page title???
</div>

Upvotes: 11

Views: 18488

Answers (3)

Benjamin Arthuys
Benjamin Arthuys

Reputation: 123

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.

Upvotes: 1

Nick Kos
Nick Kos

Reputation: 151

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';
  });
})

Upvotes: 15

Ru Chern Chong
Ru Chern Chong

Reputation: 3756

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

{{ $route.meta.title }}

Upvotes: 18

Related Questions