Vue.js: Assigning a Page Name to Different Routes

Question

I am building a web application using vue.js v1.0, vue-router v0.7 and WebPack. I follow the Single File Component and has different components for each page.

I do not know how to change the page title in different routes (or, possibly, different components) when I browse web application 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 little research: use Guard Guard

As detailed in my previous answer, here is the problem: vue-router may start reusing route components after creating for the first time. In fact, there is no need to destroy these components on the exit route and re-create the next time you enter the route. Therefore, the created hook in my previous solution may not work on subsequent visits to the same route. Therefore, the name of our window may not work as expected.

To overcome this problem, we can set the window title in the route change event. The router instance has an afterEach hook that is called after a route change. This can be used to set the window name as described below:

 // Let 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, such as "/ user / foo", to "/ user / bar". If you want the username in the header or some information about the dynamic page to be displayed in React to Params changes , as described in http://router.vuejs.org/en/essentials/dynamic-matching.html . Based on the documents, we should use watch in the component as follows:

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

Hope this helps!

Answer 2

I also had the same problem a few days ago, and I solved the following in defining my route component:

 export default { created: function() { window.document.title = "Page Title for this route" ... }, ... } 

This is really not the right way to do this. Cause. I accept the big assumption that the route component is created every time you switch to a new route. This is true in vue-router now, but may change in the future.

I used ui-router in Angular 1.4 before, which allows route components to live in memory (sticky states), so changing the route happens instantly next time. If vue-router ever implements something like sticky states, my above method of setting the header to created will fail.

But until this happens, you can use this solution.

Answer 3

I have a solution and I used it on one of the projects .

First create a directive.

 Vue.directive('title', { inserted: (el, binding) => document.title = binding.value, update: (el, binding) => document.title = binding.value }) 

Suppose we are working on a file 'MyComponent.vue' .

Then use this directive for the router-view component.

 <router-view v-title="title" ></router-view> export default { data(){ return { title: 'This will be the title' } } } 

This works even if the component is updated or the page is reloaded.

Worked very well for me!