В quasar как передать данные в макет со страницы

В http://quasar-framework.org/ у меня есть несколько экранов с одинаковым макетом, например списки товаров и клиентов.

Но я не понимаю, как я могу передать данные со страницы в их макет. Например, у макета есть заголовок, который я хочу изменить в зависимости от того, какая страница отображается:

//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>

person mamcx    schedule 08.05.2018    source источник
comment
приведенный выше код всегда должен отображать первый дочерний компонент. как вы перенаправляете <TNavigation > на другой компонент?   -  person Sphinx    schedule 09.05.2018
comment
Я не понимаю вопроса. Кроме того, это краткий пример полного кода.   -  person mamcx    schedule 11.05.2018
comment
вы можете разветвить песочницу Quasar, а затем опубликовать свои коды, и мы сможем вам помочь.   -  person Sphinx    schedule 11.05.2018
comment
Не получается зайти на страницу из макета?   -  person mamcx    schedule 12.05.2018
comment
Я думаю, что вы можете неправильно понять, как работает Vue router и <route-view>. Но вы не предоставляете коды на <TNavagation> и своей домашней странице, поэтому не можете понять, как это сделать.   -  person Sphinx    schedule 12.05.2018
comment
@Sphinx Я удаляю tnavigator и использую только компоненты quasar. Зачем нужен дом? Требуется ли для этого глобальный синглтон?   -  person mamcx    schedule 12.05.2018
comment
извините за мой плохой английский, домашняя страница означает страницу, на которой вы размещаете свою навигацию. Проверьте эту скрипту, нужен ли вам подобный макет/навигация?   -  person Sphinx    schedule 12.05.2018
comment
@Sphinx да, похоже, теперь вопрос в том, как, если я нажму на вспомогательную страницу, могу ли я изменить данные в макете   -  person mamcx    schedule 12.05.2018
comment
Я также хотел бы изменить заголовок в зависимости от того, какая страница называется. Возможно, используйте хранилище Vuex или глобальную шину событий.   -  person August    schedule 22.05.2018


Ответы (2)


Вам нужно использовать мета в ваших маршрутах. В своем макете используйте это:

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

или просто:

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

Это может быть настроено в ваших маршрутах следующим образом:

[
    { path: '/', meta: { title: 'Dashboard' } },
    { path: '/route-1', meta: { title: 'Route 1' } },
]
person Kumar    schedule 19.03.2021
comment
Обратите внимание, что это мета-решение маршрута работает для вложенных маршрутов! Маршрутизатор Vue будет проходить вверх по дереву, пока не найдет совпадение, поэтому будет использоваться наиболее конкретный заголовок. - person parker_codes; 14.04.2021

Проверьте portal-vue, чтобы найти довольно надежное решение этой проблемы.

На своей странице вы должны добавить портал в свой заголовок, причем заголовок является местом назначения портала. Это позволяет изменять заголовок из любого места.

person Ero    schedule 17.08.2019