Turbolink在Livewire版本2中不起作用

Question

我正在做我的新项目和技术栈: laravel 8+ Livewire V2 + Jetstream，创建一个单页面应用程序。但我仍然感到困惑的是，在我选择的技术堆栈中是否存在SPA。

我知道Livewire不再支持开箱即用的Turbolinks，所以他们提供了Turbolinks adapter。我已经遵循了文档，但它似乎不起作用。请帮助我了解这个问题，并让我知道Livewire版本2中是否可以使用SPA。

下面是我的代码：

<div class="min-h-screen bg-gray-100">
        @livewire('navigation-menu')

        <!-- Page Heading -->
        @if (isset($header))
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endif

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>

    @stack('modals')

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>

Answer 1

您需要先安装Turbolink模块，请转到Turbolinks文档Here。

Answer 2

Livewire 2中已经移除了对Turbolink的支持，所以你需要添加一个额外的JS脚本才能让它工作。更多信息请点击此处=> https://github.com/livewire/turbolinks

只需在您的livewire脚本后添加以下内容：

<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

示例：

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

Answer 3

Livewire版本1内部支持Turbolinks。Livewire version2删除了内部支持，并将其提取到此插件中。

Livewire版本2的目标是在livewire中提供完整的Turbolinks/Turbo支持。

1. 在布局中的@livewireScripts
2. add livewire/turbolinks package下方添加

package热插拔/加速包

@livewireScripts

<script type="module">
    import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>

<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>