Laravel Blade中修正AdminLTE v3侧边栏搜索结果URL路由问题

问题原因 #

AdminLTE的sidebar-search组件默认会将菜单链接视为相对路径，自动拼接当前站点域名。但Laravel的route()方法默认生成的是绝对URL（包含完整域名），组件会把这个绝对URL当成相对路径再次拼接，就出现了http://abcx.com/http%3A//abcx.com/posting这种重复域名的错误URL。

解决方案 #

方案1：让菜单链接生成相对路径

直接修改菜单中的route()调用，添加第三个参数false来生成相对路径：

<li class="nav-item">
    <a href="{{ route('notifikasi.index', [], false) }}"
        class="nav-link <?= request()->routeIs('notifikasi.*') ? 'active text-primary' : '' ?>">
        <i class="nav-icon far fa-circle"></i>
        <p>
            Notifikasi
        </p>
    </a>
</li>

<li class="nav-item">
    <a href="{{ route('logs', [], false) }}" class="nav-link <?= request()->routeIs('logs*') ? 'active text-primary' : '' ?>">
        <i class="nav-icon far fa-circle"></i>
        <p>
            Aktivitas
        </p>
    </a>
</li>

route()的第三个参数控制是否生成绝对URL，设为false后，输出的链接会是/notifikasi这种相对路径，组件就能正确拼接成完整URL。

方案2：转换已有绝对URL为相对路径

如果不想修改route()的调用方式，可以用str_replace去掉域名部分，保留相对路径：

<li class="nav-item">
    <a href="{{ str_replace(url('/'), '', route('notifikasi.index')) }}"
        class="nav-link <?= request()->routeIs('notifikasi.*') ? 'active text-primary' : '' ?>">
        <i class="nav-icon far fa-circle"></i>
        <p>
            Notifikasi
        </p>
    </a>
</li>

url('/')会获取当前站点的根域名，替换后得到的就是相对路径。

方案3：自定义组件的URL处理逻辑

如果不想修改菜单代码，可以在页面初始化时，重写sidebar-search组件的URL处理逻辑。在页面的JS脚本中添加：

$(function() {
    // 初始化sidebar-search后修正链接
    $('.sidebar-search').on('searchCompleted', function() {
        $(this).find('.search-results a').each(function() {
            let href = $(this).attr('href');
            // 移除重复的域名部分
            if (href.startsWith(window.location.origin)) {
                $(this).attr('href', href.replace(window.location.origin, ''));
            } else if (href.includes(window.location.origin.replace('http://', ''))) {
                // 处理转义后的域名（比如http%3A//abcx.com）
                let escapedOrigin = encodeURIComponent(window.location.origin);
                $(this).attr('href', href.replace(escapedOrigin, ''));
            }
        });
    });
});

这段代码会在搜索完成后，自动修正结果中的链接，去掉重复的域名部分。

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