CODEWITHSUNDEEP
laravelvue.jsvuejs2laravel-5.4
Paul Caleb
Paul Caleb

Reputation: 205

how to change page title according to route links vuejs

I want to change my page title according to the links I follow, just like how every page on stack overflow all have different page title with different links, some page titles are binded with the question title, how can such be done with vuejs, this will be good for search engine optimization, etc. I'm loving vuejs but I dont understand this part, is there something I'm missing?

Upvotes: 2

Views: 5185

Answers (2)

Alexander Kim
Alexander Kim

Reputation: 18382

In case someone is using Vue webpack template (vue init webpack projectname):

You need to paste Global Guard in "src/main.js", right before new Vue:

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

new Vue({})

You can read more about Guards here: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

Upvotes: 0

Nitesh Chauhan
Nitesh Chauhan

Reputation: 361

If you are using vue-router, you can do this using beforeEach:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Router = new VueRouter({
    routes: [
        {
            path: '/path',
            component: Component,
            meta: { title: 'My Page Title' }
        }
    ]
})

Router.beforeEach((to, from, next) => {
    document.title = to.meta.title

    next()
});

Upvotes: 16

Related Questions