1

我正在使用 Swup.js 和一个也使用 Livewire 的 Laravel 项目。我几乎让它正常工作，但我遇到了一个奇怪的错误。

情况如下：

  • 第一页加载得很好。一切都按预期工作。
  • 一旦您单击一个 swup 链接并“加载”您的下一页，一切都会失败。不会执行任何 Javascript，Livewire 也无法运行。
  • 但是，一旦您通过单击链接第二次访问该页面，就好像所有内容都已正确加载到缓存中并且正在工作 - Javascript、Livewire，一切似乎都很好。

我无法弄清楚为什么会这样。这是我的设置+代码：

app.js：

import Swup from 'swup';
import SwupScriptsPlugin from '@swup/scripts-plugin';
import SwupLivewirePlugin from '@swup/livewire-plugin';

const swup = new Swup({
  cache: false,
  debugMode: true,
  plugins: [
      new SwupLivewirePlugin(),
      new SwupScriptsPlugin({
          head: true,
          body: true,
          optin: true
      }),
  ]
});

我的主刀片模板，layouts.app.blade.php：

...
<livewire:scripts />

<main id="swup">
    @yield('content')
    <script data-swup-ignore-script src="{{ asset('js/app.js') }}"></script>
    @yield('js')
</main>
...

我的home.blade.php文件：

@extends('layouts.app')

@section('content')
<section class="mt-24 mb-32 py-12 relative">
  <div class="max-w-7xl mx-auto px-4">
        <div class="flex flex-col space-y-3 lg:w-1/2 w-full ml-auto">
          <span class="block text-3xl xl:inline">I'm a...</span>
          <span id="role" class="block text-indigo-600 xl:inline text-7xl">Hymn Writer</span>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection


...

@section('js')
<script data-swup-reload-script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.17.0/core.min.js" integrity="sha512-o6alMAMTI5qAmVC1UvuRPgTl3UOOkP8NZ6212+rq1Oslsuy8Owt9r5Z0Wu0LNxpw/Q8N8ToGiyovHV+kyOulxg==" crossorigin="anonymous"></script>

<script data-swup-reload-script>
  function init() {
    var role = document.getElementById('role');

    var typewriter = new Typewriter(role, {
        loop: false,
    });

    typewriter.typeString('Hymn Writer')
        .pauseFor(2400)
        .deleteAll()
        .typeString('Father')
        .pauseFor(2400)
        // ...etc
        .start();
  }
  init();

  document.addEventListener('swup:contentReplaced', init);
</script>
@endsection

我不知道为什么它在初始页面加载和后续链接点击时起作用，但不是从另一个页面开始时第一次点击链接？这里发生了什么？

4

0 回答 0