在局部视图中动态加载内容

Question

基本上，我正在尝试在主页上实现选项卡。选项卡将由其他页面上的组件组成，以便快速访问。我对如何在以“惰性”方式向其发送数据的同时导入布局感到困惑。

我现在使用@section 标签来引入布局，这很好。但我只想在单击选项卡时请求它需要的数据。

在我的 main.blade.php 中：

<li>
      <a href="#tab_1" data-controller="tab_1" data-target="#tab_1" data-toggle="tab" aria-expanded="true">
      tab 1 </a>
</li>


<div class="tab-pane" id="tab_1" >
     @yield('tab_1')
</div>

在我的 tab1 中：

@extends('main')
@section('tab_1')
@foreach ($activities as $activity)
{{--implementation--}}
@endforeach
@endsection

在我的 TabController@showtab1 中：

public function showtab1(Request $request) {
   //Logic here
   return view('tab1', ['activities' => $activities]);
}

最佳方案是仅在通过调用控制器函数单击选项卡时加载每个选项卡的内容。我已经通过使用路由来更改整个页面来使其工作，但这有点破坏了选项卡的优势。

Answer 1

您通常会以使用相同布局的方式实现此功能，然后通过 URL -> 控制器 -> blade include parameter -> 刀片视图传递不同的参数。

下面的示例演示了如何在 Laravel 中跨文件执行“延迟”加载（同时仅加载 1 个选项卡）：

// /routes/web.php
Route::get('/tabbed-page', 'TabbedPageController@index');
Route::get('/tabbed-page/:tab', 'TabbedPageController@show');

// /App/Http/Controllers/TabbedPageController.php

public function show($request, $tab) {
  $data = ['title'=> 'No tab'];
  if ($tab === 'tab1') { 
    $data = ['title' => 'I am tab 1'];
  }

  return view('page', [
    'tab' => $tab,
    'data'=> $data
  ]);
}
public function index($request) {
  // open tab1 by default
  redirect('/tabbed-page/tab1');
}

{{-- /resources/views/page.php, requested at for example /tabbed-page/tab1 --}}
<nav>
  <a href="tab1" class="@if($tab === 'tab1') active @endif">Tab 1</a>
  <a href="tab2" class="@if($tab === 'tab2') active @endif">Tab 2</a>
  <a href="tab3" class="@if($tab === 'tab3') active @endif">Tab 3</a>
  <a href="tab4" class="@if($tab === 'tab4') active @endif">Tab 4</a>
</nav>
<main>
  @include($tab, $data)
</main>

{{-- /resources/views/tab1.php, tab2.php, tab3.php, etc.. --}}
<div id="tab1">
  <h1>{{ $data['title] }}</h1>
  Content ....
</div>