Компоненты Barba JS и Vue с лезвием Laravel - PullRequest
Новая
       49

Компоненты Barba JS и Vue с лезвием Laravel

0 голосов
/ 30 апреля 2020

Я пытаюсь осуществить переходы с одной страницы моего сайта на другую. Поэтому я решил использовать Barba JS для этого.

Моя установка выглядит следующим образом:

  • Элемент списка
  • Vue 2.5.17
  • Барба / ядро: 2.9.7

Для людей, знакомых с Laravel: вы создаете Vue компоненты в resources/js/components, а затем внутри resources/js/app.js вы регистрируете Vue component: 

Vue.component('clients-section', require('./components/OurClientsSection.vue').default);

Затем внутри моего файла представления (home.blade.php) вы просто вызываете компонент следующим образом: 

<clients-section></clients-section>

и компонент отображается.

Проблема, с которой я сталкиваюсь, это когда я пытаюсь реализовать Barba JS. Согласно документации, я добавляю: 

<body data-barba="wrapper">
   <navbar></navbar>

   <main data-barba="container" data-barba-namespace="home">
       <hero-section></hero-section>
       <section-divider-a></section-divider-a>
       <feature-section></feature-section>
       <clients-section></clients-section>
       <responsive-divider></responsive-divider>
       <newsletter-section></newsletter-section>
       <p>this is the homepage section</p>
   </main>

   <footer-section></footer-section>
</body>

Проблема:

Когда я впервые загружаю страницу, все мои компоненты отображаются. Домашняя страница такая же, как я ее разработал.

Когда я нажимаю на ссылку, чтобы перейти от домашней страницы (например, Свяжитесь с нами), я вижу, что анимация перехода Barba JS проходит очень хорошо. Но когда я нажимаю ссылку «Главная» на go назад на домашнюю страницу, каждый контент VueJS компонентов внутри <main data-barba="container" data-barba-namespace="home"></main> не отображается . [и компоненты отображаются просто отлично]. Просто <p>this is the homepage section</p>. Компоненты Vue нигде не найдены, но если вы go в «Инспектировать элемент», вы увидите их как HTML теги:

enter image description here

Есть идеи, почему это происходит? Это проблема совместимости между Vue и Barba JS? И в основном какие-нибудь решения? :)

...