laravel - 使用 Laravel 刀片语法进行引导选项卡和路由

Question

我已经阅读了 Laravel 中有关 Bootstrap 选项卡的一些链接，但没有一个对我有用。

我有 3 个视图（movies、scheduled_movies、group_movies），每个视图都有其各自的控制器。现在我想使用引导选项卡组件显示所有这些视图。我尝试了很多，但选项卡无法正常工作，或者有时第一个选项卡中显示的三个视图的所有数据，有时只显示选项卡而不显示数据。

这是我的代码-

app.blade.php

@include('components.navbar')
@yield('base')

base.blade.php

@extends('layouts.app')

@section('base')
<div class="container-fluid">
    <div class="row">
        <div class="col-2 d-none d-md-block bg-light sidebar" >
            @include('components.sidebar')
        </div>
        <main id="main" class="col-10 ml-sm-auto col-lg-10 px-3">
            @yield('content')
        </main>
    </div>
</div>
@endsection

我有单独tab.blade.php的所有引导选项卡代码的编写位置。我已经使用了所有 3 个视图@include

tab.blade.php

@extends('layouts.base')

@section('content')
<div class="p-3">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link" id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies"
                aria-selected="true">All movies</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="scheduled-movies-tab" data-toggle="tab" href="#scheduled-movies" role="tab"
                aria-controls="scheduled-movies" aria-selected="false">Scheduled Movies</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="group-movies-tab" data-toggle="tab" href="#group-movies" role="tab" aria-controls="group-movies"
                aria-selected="false">Group Movies</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show" id="movies" role="tabpanel" aria-labelledby="movies-tab">
            @include('movies.all_movies.index')

        </div>
        <div class="tab-pane fade" id="scheduled-movies" role="tabpanel" aria-labelledby="scheduled-movies-tab">
            @include('movies.scheduled-movies.index')
        </div>
        <div class="tab-pane fade" id="group-movies" role="tabpanel" aria-labelledby="group-movies-tab">
            @include('movies.group-movies.index')
        </div>
    </div>
</div>
@endsection

电影控制器

class MoviesController extends Controller
{
    public function index()
    {
        $movies = Movie::all();
        return view('movies.all_movies.index')->with('movies', $movies);    
    }
}

相同的代码写在ScheduledMoviesController.

这是我的web.php文件

Route::get('movies', 'MoviesController@index');
Route::get('scheduled-movies', 'ScheduledMoviesController@index');
Route::get('group-videos', 'GroupMoviesController@index')->middleware('verified');

到目前为止，我已经弄清楚了一些案例

1. 也许我的刀片语法@yield 或@include 是错误的。
2. 也许路由是错误的（因为选项卡的第一页显示了所有三个数据）。

标签： laravellaravel-bladebootstrap-tabs