如何在Laravel中实现导航栏点击内容同页左侧展示？

步骤1：修正前端模板并添加交互逻辑 #

先修复原模板语法错误（如clas改为class、修正链接路径），再给导航添加AJAX交互实现无刷新加载：

<div class="col-1" style="position: fixed;z-index: 3;width: 11%;background: yellowgreen; height:calc(100% - 100px);">
    <nav style="background: white;" class="nav">
        <ul>
            <li class="{{ Request::is('dashboard*') ? 'active':''}}">
                <a href="#" data-view="dashboard" class="menu-link">
                    <i class="fa fa-pie-chart"></i> DASHBOARD
                </a>
            </li>
            <li class="{{ Request::is('register*') ? 'active':''}}">
                <a href="#" data-view="register" class="menu-link">
                    <i class="fa fa-edit"></i> REGISTER
                </a>
            </li>
        </ul>
    </nav>
</div>
<div class="col-11" style="background:lightcyan;width: 89%;float:left;height:calc(100% - 100px);">
    <div id="content-container" class="p-4">
        <!-- 页面初始化默认加载dashboard视图 -->
        @include('dashboard')
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.menu-link').click(function(e) {
        e.preventDefault();
        const viewName = $(this).data('view');
        
        // 切换导航激活状态
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
        
        // AJAX请求加载对应视图内容
        $.ajax({
            url: `/${viewName}/content`,
            method: 'GET',
            success: function(response) {
                $('#content-container').html(response);
            },
            error: function() {
                $('#content-container').html('<p>加载失败，请重试</p>');
            }
        });
    });
});
</script>

步骤2：配置后端路由 #

在routes/web.php中新增返回视图内容的路由，同时保留原路由用于页面首次加载：

// 返回视图内容的接口路由
Route::get('/dashboard/content', function() {
    return view('dashboard');
});

Route::get('/register/content', function() {
    return view('register');
});

// 页面首次加载路由（替换为你的主模板文件名）
Route::get('/dashboard', function() {
    return view('main-template');
});

Route::get('/register', function() {
    return view('main-template');
});

核心说明 #

• 用data-view属性标记导航对应的视图名称，简化JS逻辑
• 通过AJAX请求后端接口获取视图HTML，直接替换左侧内容容器的内容
• 同步切换导航的active类，保持视觉选中状态
• 初始化时默认加载dashboard视图，保证页面打开时的正常显示

内容的提问来源于stack exchange，提问作者jason bikari