Different layout title on children routes



  • 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



  • 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:

    1. 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}}
    
    1. Emit an event to update title

    2. Vuex
      Use a centralized store to hold the title. Then access in layout like so:

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


  • 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!


  • 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.



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

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

Log in to reply