Блог

PS: Я очень хорошо понимаю, что это может быть не то, для чего используется AlpineJS (не так, как Vue или React). Я просто хочу поиграть с этим и посмотреть, можно ли чего-нибудь достичь.

Привет всем. Поэтому у меня есть небольшая идея построить СПА-центр с Livewire, AlpineJS и API истории. Как я хочу этого достичь? Чтобы использовать вкладки AlpineJS! Единственная проблема, с которой я столкнулся до сих пор,-это как синхронизировать текущий URL-адрес страницы с x-данными Alpine. См.Коды ниже.

web.php файл

 Route::group(['middleware' => 'auth', 'namespace' => 'AppHttpLivewireApp'], function () {
    Route::get('/', Index::class)->name('index');
    Route::get('/{any}', Index::class);
});
 

Мне пришлось использовать два маршрута к одному и тому же компоненту, иначе я получу ошибку 404. Но, делая это, он прекрасно работает.

Расположение

 <div id="app">
    {{ $slot }}
</div>
 

Все, что у меня есть в моем компоненте layout-spa, — это просто слот $

Index.php Класс

 <?php

namespace AppHttpLivewireApp;

use LivewireComponent;

class Index extends Component
{
    public function render()
    {
        return view('livewire.app.index')->layout('components.layout-spa');
    }
}

 

Затем в моем index.blade.php

 <div x-data="{ page: window.location.hash ? window.location.hash.substring(1) : 'home' }">
    <nav>
        <ul class="navigation capsule-nav">
            <li class="capsule-item" :class="{ 'selected': page === 'home' }">
                <a class="capsule-link" @click.prevent="page = 'home';  window.history.pushState({}, '', '/home')" href="/home">
                    <i class="fas fa-home capsule-link-icon"></i>
                    <span class="capsule-link-text">Home</span>
                </a>
            </li>

            <li class="capsule-item" :class="{ 'selected': page === 'profile' }">
                <a class="capsule-link" @click.prevent="page = 'profile'; window.history.pushState({}, '', '/profile')" href="/profile">
                    <i class="fas fa-user capsule-link-icon"></i>
                    <span class="capsule-link-text">Profile</span>
                </a>
            </li>

            <li class="capsule-item" :class="{ 'selected': page === 'more' }">
                <a class="capsule-link" @click.prevent="page = 'more'; window.location.hash = 'more'" href="#">
                    <i class="fas fa-ellipsis-v capsule-link-icon"></i>
                    <span class="capsule-link-text">More</span>
                </a>
            </li>
        </ul>
    </nav>

    <div>
        <div x-show="page === 'home'" x-transition:enter="animate__animated animate__fadeIn animate__faster">
            @livewire('app.home')
        </div>

        <div x-show="page === 'profile'" x-transition:enter="animate__animated animate__fadeIn animate__faster">
            @livewire('app.profile')
        </div>

        <div x-show="page === 'more'" x-transition:enter="animate__animated animate__fadeIn animate__faster">
            @livewire('app.more')
        </div>
    </div>
</div>
 

Там, наверху, все работает нормально. Нажатие на каждую навигационную вкладку приведет к соответствующему отображению каждой страницы. Теперь, если вы посмотрите на мои навигационные ссылки, я сделал две с помощью функции history.pushState() и последнюю (еще) с обычным окном.Расположение.хэш = «еще». Функция history.pushState() фактически работает при переходе на эту страницу, а также при обновлении URL-адреса. Например, при нажатии на навигационную ссылку «профиль» отобразится правильная страница, а URL-адрес будет обновлен до example.com/profile. Но если я обновлю страницу, URL-адрес останется прежним, но загруженная страница будет» Домашней «страницей, как указано в x-data=» {страница: окно.Расположение.гашиш ? окно.местоположение.хэш.подстрока(1) : ‘главная страница’ }». Таким образом, x-данные не синхронизируются с URL-адресом, чтобы загрузить правильную страницу, потому что я даже не знаю, как это сделать :D.

Поэтому мой вопрос в том, как я могу заменить «страница: окно».Расположение.гашиш ? окно.location.hash.подстрока(1):» главная » в x-данных с URL-адресом, чтобы x-данные возвращали правильную страницу? Я действительно мало что знаю о Alpine JS и API истории. Я просто пытаюсь поиграть с альпийскими вкладками JS.