Vue.js: Assigning page title to different routes [duplicate]

Question

I'm building a web application using vue.js v1.0, vue-router v0.7 and WebPack. I'm following Single File Component pattern and have different components for each page.

I don't know how I could change page title in different routings (or maybe different components) when I am navigating through the web app pages. I also want page titles to be available in browser history.

Answer 1

In addition to my earlier solution posted here, there is a second method that I found after a bit of research: use Navigation Guards

As detailed in my previous answer, here is the problem: vue-router may start reusing route components after getting created for the first time. There is really no need to destroy these components on route-exit, and re-create on subsequent route-entry. Therefore the created hook in my earlier solution may not fire on subsequent visits to the same route. Therefore our window title may not work as expected.

To overcome that problem, we can set the window title on a route-change event. The router instance has a afterEach hook that gets called after route change. This can be used to set window title as detailed below:

// Let's say this is your router instance, with all "Named Routes"
const ROUTER_INSTANCE = new VueRouter({
    mode: "history",
    routes: [
        { path: "/", name: "HomeComponentName", component: HomeComponent },
        { path: "/about", name: "AboutComponentName", component: AboutComponent },
        { path: "*", name: "RouteErrorName", component: RouteError }
    ]
})

// Assign page titles for each of the "named routes"
// Reason: This allows us to have short named routes, with descriptive title
const PAGE_TITLE = {
    "HomeComponentName": "Your Dashboard",
    "AboutComponentName": "About Us Page",
    "RouteErrorName": "Error: Page not found"
}

ROUTER_INSTANCE.afterEach((toRoute, fromRoute) => {
    window.document.title = PAGE_TITLE[toRoute.name]
    console.log(toRoute)  // this lets you check what else is available to you here
})

This may still not help you if you are navigating between similar routes, like "/user/foo" to "/user/bar". If you want user name in the titlebar or some dynamic page specific info, check out Reacting to Params Changes as detailed in http://router.vuejs.org/en/essentials/dynamic-matching.html. Based on docs, we should be able to use watch in component as follows:

watch: {
    '$route' (toRoute, fromRoute) {
        window.document.title = "some page title"
    }
}

Hope it helps!