Laravel 急流惯性持久化布局答案

【问题标题】：Laravel jetstream inertia persistent layoutLaravel 急流惯性持久化布局
【发布时间】：2021-06-20 01:55:52
【问题描述】：

在全新的 laravel 安装中，我试图按照惯性文档 https://inertiajs.com/pages 使布局持久化

app.js

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import AppLayout from '@/Layouts/AppLayout';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => import(`./Pages/${name}`)
              .then(({ default: page }) => {
                if (page.layout === undefined) {
                  page.layout = AppLayout
                }
                return page
              }),
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

Dashboard.vue（这里我用 div 替换了默认的 app-layout 包装器）

<template>
    <div>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            Welcome,
        },
    }
</script>

编译时出现此错误：

错误：缺少元素/if/for 节点的 Codegen 节点。申请首先进行适当的转换。

我不明白那是什么意思。有 jetstream 和惯性的默认 laravel 应用不使用持久布局的原因吗？

【问题讨论】：

标签： layout laravel-8 inertiajs jetstream

【解决方案1】：

您需要应用程序布局，因为您需要从它扩展

【讨论】：

欢迎新的贡献者。如果您可以通过例如改进您的答案，那就太好了。一个示例并解释为什么在这种情况下需要应用布局。
谢谢，这就是显示错误的原因，但我们无法使用此系统进行持久布局。我终于放弃了这个想法

【解决方案2】：

如果标题插槽位于 AppLayout 中，也就是持久插槽，则不能使用这种方式（因为还没有插槽？我不知道，但我知道持久布局会在子组件之后挂载，这可能是罪魁祸首） .作为一种解决方案，使用命名槽创建另一个布局，即 PageLayout，并使用该布局来构建您的仪表板和其他页面：

AppLayout.vue

<template>
    <div>Persistent stuff...</div>
    <slot />
    <div>Persistent stuff...</div>
</template>

PageLayout.vue

<template>
    <slot name="header" />
    <slot name="content" />
    <div>PageLayout stuff...</div>
</template>

仪表板.vue

<template>
    <PageLayout>
        <template #header>
            <h1>Dashboard</h1>
        </template>
        <template #content>
            <p>Welcome user!</p>
        </template>
    </PageLayout>
</template>

<script>
import AppLayout from 'AppLayout'
import PageLayout from 'PageLayout'

export default {
    layout: AppLayout, // Persistent layout
    components: {
        PageLayout // Regular layout
    }
</script>

这里有一个正在进行的讨论： https://github.com/inertiajs/inertia/issues/171

【讨论】：