InertiaJS 如何為選項卡使用“嵌套布局”？

Question

我希望獲得一些關於 InertiaJS 中“嵌套布局”的額外信息。 關於它的文檔非常稀少，我幾乎找不到任何類型的示例來說明它是如何工作的，而且網站上的文檔也沒有很好地描述它是如何工作的或代碼在做什么。 ( https://inertiajs.com/pages#persistent-layouts )

基本上我想在這里實現類似於這條推文的功能； https://twitter.com/klaasgeldof/status/1181198792995037184

希望有人可以提供一些額外的信息，因為我在正常工作時遇到了很多麻煩。

Answer 1

有很多方法可以解決這個問題，我想說它們與您的前端堆棧更相關。 因為這個問題是用 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

具有相同的布局視圖，但傳遞了一個“選項卡視圖”組件。 您根本不需要切換路由，而是為該一個選項卡視圖組件提供道具來呈現三個不同的選項卡。

根據數據，當您預先獲取所有內容時，這種方法可能會更慢。

使用 #1，您可以按需獲取數據，而且由於它是 SPA，因此用戶不會注意到差異。

#1 的另一個好處是，用戶實際上可以主動訪問該特定選項卡並將其 URL 加入書簽以便頻繁訪問。 您可以對錨點/哈希執行相同的操作，但畢竟您使用的是 SPA。

我可以繼續，但選擇任一選項，或者這足以給你一些靈感。

Answer 2

在選項卡內添加一個<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]這就是訣竅所在。