0

我希望获得一些关于 InertiaJS 中“嵌套布局”的额外信息。它的文档非常稀缺，我几乎找不到任何类型的示例来说明它是如何工作的，而且网站上的文档对它的工作原理或代码的作用也没有很好的描述。（https://inertiajs.com/pages#persistent-layouts）

基本上我想在这里实现类似于这条推文的功能； https://twitter.com/klaasgeldof/status/1181198792995037184

希望有人可以提供一些额外的信息，因为我在让它正常工作时遇到了很多麻烦。

4

2 回答 2

0

添加<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]这就是诀窍所​​在。

于 2022-02-27T08:50:26.513 回答
0

有很多方法可以解决这个问题，我想说它们与您的前端堆栈更相关。由于这个问题是用 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。

我可以继续，但选择任何一个选项，或者这足以给你一些灵感。

于 2020-08-11T15:13:25.100 回答