6

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

2 回答 2

5

您需要在路线中使用元数据。在你的布局中，使用这个：

<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' } },
]
于 2021-03-19T04:53:28.477 回答
1

查看portal-vue以获得解决此问题的非常强大的解决方案。

在您的页面中，您将在标题中添加一个“门户”，标题是“门户目标”。这允许您从任何地方修改标题。

于 2019-08-17T23:05:43.837 回答