InertiaJS Как использовать "Вложенные макеты" для вкладок?

Question

Я надеялся получить дополнительную информацию о "вложенных макетах" в InertiaJS. Документация по нему очень скудная, и я едва могу найти какие-либо примеры, показывающие, как это работает, а документация на сайте не очень описывает, как это работает или что делает код. (https://inertiajs.com/pages)

В основном я хочу добиться функциональности, аналогичной описанной в этом твите;https://twitter.com/klaasgeldof/status/1181198792995037184

Надеюсь, кто-то сможет предоставить дополнительную информацию, потому что у меня было много проблем с тем, чтобы это работало правильно.

Answer 1

Добавить <slot />внутренняя вкладка

Теперь хитрость заключается в том, чтобы поместить два макета на вложенную страницу.

https://inertiajs.com/pages

      <script>
  import SiteLayout from './SiteLayout'
  import NestedLayout from './NestedLayout'

  export default {
    // Using a render function
    layout: (h, page) => {
      return h(SiteLayout, [
        h(NestedLayout, [page]),
      ])
    },

    // Using the shorthand
    layout: [SiteLayout, NestedLayout],

    props: {
      user: Object,
    },
  }
</script>

layout: [SiteLayout, NestedLayout]вот где хитрость.

Answer 2

Есть много подходов к этому, и я бы сказал, что они больше связаны с вашим стеком внешнего интерфейса. Поскольку этот вопрос помечен тегом vue.js, я отвечу на этом основании.

Подход #1

Инерционная часть здесь просто создает макет, который, по сути, является просто компонентом vue. Затем этот макет содержит боковую и верхнюю навигацию и слот для заполнения основного содержимого. Затем вы можете создать компонент страницы панели мониторинга, который будет использовать этот макет, добавивlayout: myDashboardLayout в экспорте.

Чтобы получить тот же эффект, вы в основном переходите к разным представлениям, которые передают разные слоты макету и их соответствующим данным.

    // Your DashboardLayout.vue
    <template>
        <div>
             <my-sidebar :data="foo" />
             <my-topbar :data="bar" />
             <slot name="dashboardContent" />
        </div>
    </template>

    // Your Dashboard/Index.vue
    <template>
        <main slot="dashboardContent" :data="myData" />
    </template>
    
    <script>
      import DashboardLayout from './DashboardLayout'
    
      export default {
    
        // Using the shorthand
        layout: DashboardLayout,
    
      }
    </script>

    //web.php
    
    Route::get('/dashboard', function(){
        return Inertia::render('Dashboard/Index', [data]);
    });
    
    Route::get('/dashboard/foo', function(){
        return Inertia::render('Dashboard/Index', [fooData]);
    });
    
    Route::get('/dashboard/bar', function(){
        return Inertia::render('Dashboard/Index', [barData]);
    });
    

Затем вы либо посетите domain.com/dashboard/foo или domain.com/dashboard/bar

Подход #2

Имея такое же представление макета, но передавая компонент "tab-view". Вы вообще не переключаете маршруты и не предоставляете один компонент представления вкладок с реквизитами для рендеринга трех разных вкладок.

В зависимости от данных этот подход может быть медленнее, поскольку вы получаете все заранее.

С #1 вы получаете данные по запросу, и поскольку это SPA, пользователь не заметит разницы.

Еще одно преимущество №1 заключается в том, что пользователь действительно может активно посещать эту конкретную вкладку и добавлять в закладки свой URL-адрес для частого доступа. Вы можете сделать то же самое с якорями / хешами, но в конце концов вы используете SPA.

Я мог бы продолжить, но выбрал любой вариант, или, возможно, этого было достаточно, чтобы вдохновить вас.