Different layout title on children routes

Nico-L

Heelo,

First post here as I am learning vue + Quasar. So far I loved them both.

SO I have a route with a layout a several children route. I’d like to have a different title in the layout depending on the children. How can I pass the title up to the layout?

Thanks
Nicolas

benoitranque

Hi Nico, and welcome!

This is mostly a vue issue, but quasar does come with some helpers for this.

Here are a couple ways you could do this:

Route Meta
When declaring your routes in router.js, add a meta field

{
  path: 'childroute',
  component: load('childcomponent'),
  meta: {
    title: 'Child component' 
  }
}

Then in your layout:

{{$route.meta.title}}

Emit an event to update title
Vuex
Use a centralized store to hold the title. Then access in layout like so:

{{$store.getters.pagetitle()}}

Nico-L

Hi Benoit,

Thanks for your answer. Sorry if it was rather a vue issue. As I am learning both at the same time, I have hard time to tell sometimes. I guess I’ll go along your first solution.

Cheers

This post is deleted!

metalsadman

use vuex like beonitranque’s last post. use a state for page title and set that using an action every time you change a route then use that state property in your q-toolbar-title {{ pageTitle }}. look into his example.

eCumbe

@jaiken06 your children route should look’s like this :point_down

 {
        path: '/dividas', component: () => import('pages/dividas/Index.vue'),
        meta: {
          title: 'Dívidas'
        }
      },

No More Posting New Topics!

Different layout title on children routes