In quasar how pass data to the layout from the page

Question

In http://quasar-framework.org/, I have several screens that share the same layout, like lists of products and customers.

But, I don't see how I can pass the data from the page to their layout. For example, the layout has a title that I wish to change depending on which page is being displayed:

//Routes:
  {
    path: '/orders',
    component: () => import('layouts/list'),
    children: [
      { name: 'pickCustomer', path: '/customer', component: () => import('pages/CustomersList') },
      { name: 'pickProducts', path: '/products/:customer_id', component: () => import('pages/AddProductsList') },
      { name: 'addProduct', path: '/addproduct/:order_id/:product_id', component: () => import('pages/AddProductsList') },
      { name: 'confirmOrder', path: '/confirm/:order_id', component: () => import('pages/AddProductsList') }
    ]
  }

//list.vue
    <template>
      <q-layout>
        <q-layout-header>
            <q-toolbar>
            <q-btn
                flat
                round
                dense
                icon="chevron_left"
                @click="leftDrawer = !leftDrawer"
            />
            <q-toolbar-title>
                {{title}}
            </q-toolbar-title>
            <q-btn flat round dense icon="save" label="Add" />
            </q-toolbar>

            <q-toolbar>
            <q-toolbar-title>
                <q-search v-model="search" @input="change" inverted color="none" />
            </q-toolbar-title>
            </q-toolbar>
        </q-layout-header>          </q-layout>
    </template>

    <script>    
    export default {
      // name: 'LayoutName',
    }
    </script>

//Customers.vue
<template>
</template>

<script>
import CustomersRows from '../statics/json/customers.json'

export default {
  data () {
    return {
      title: 'Customers', <--HOW TO PASS THIS?
    }
  }
}
</script>

Answer 1

You need to use meta in your routes. In your layout, use this:

<q-toolbar-title
    v-if="$route.meta.title"
    class="text-center"
>
    {{ $route.meta.title }}
</q-toolbar-title>
<q-toolbar-title
    v-else 
    class="text-center"
>
    Any default title you may have
</q-toolbar-title>

or simply:

<q-toolbar-title class="text-center">
    {{ $route.meta.title || 'Any default title you may have' }}
</q-toolbar-title>

This could be set up in your routes like so:

[
    { path: '/', meta: { title: 'Dashboard' } },
    { path: '/route-1', meta: { title: 'Route 1' } },
]

Answer 2

Check out portal-vue for a pretty robust solution to this problem.

In your page you would add a "portal" to your header, with the header being the "portal destination". This allows you to modify the header from anywhere.