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



  • @benoitranque Hey there, I tried to use your first method and added the meta into the route:

    const routes = [
      {
        path: '/',
        component: () => import('layouts/MyLayout.vue'),
        children: [
          { path: '', component: () => import('pages/Index.vue') }
        ],
        meta: {
          title: 'Home Dashboard'
        }
      },
    

    and then in my main layout in the title section, I added:

    <q-toolbar-title>
              {{$route.meta.title}}
              <div slot="subtitle">Queen's Computer Science Building Management System</div>
            </q-toolbar-title>
    

    Do you have any idea why this might not be working? It just displays a blank toolbar with no text in it.

    Thanks



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