为什么 Laravel 组件无法正确呈现？取决于路线？

Question

当我点击 http://127.0.0.1:8000/welcome 时，一切都很好。但是 http://127.0.0.1:8000/hh/welcome 页面看起来没有 CSS 引用或任何东西。

知道为什么会这样以及如何解决吗？非常感谢！

路线 > web.php

Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);

app > Http > Controllers > BikeController.php

    public function show(Bike $bike)
    {
        return view('bikes.show', [
            'bike' => $bike
        ]);
    }

资源 > 观点 > 自行车 > show.blade.php

<x-layout>
<h1>Hello World!</h1>
</x-layout>

资源 > 视图 > 组件 > layout.blade.php

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>BM | Dashboard &amp; Web App Template</title>

    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
    <link rel="manifest" href="assets/img/favicons/manifest.json" />
    <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
    <meta name="theme-color" content="#ffffff" />
    <script src="assets/js/config.js"></script>
    <script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet" />
    <link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
    <link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
    <link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
    <link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
    <link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
    <script> 
        var isRTL = JSON.parse(localStorage.getItem("isRTL")); 
        if (isRTL) {   
            var linkDefault = document.getElementById("style-default");   
            var userLinkDefault = document.getElementById("user-style-default");   
            linkDefault.setAttribute("disabled", true);   
            userLinkDefault.setAttribute("disabled", true);   
            document.querySelector("html").setAttribute("dir", "rtl"); 
        } else {   
            var linkRTL = document.getElementById("style-rtl");   
            var userLinkRTL = document.getElementById("user-style-rtl");   
            linkRTL.setAttribute("disabled", true);   
            userLinkRTL.setAttribute("disabled", true); 
        }
    </script>
  </head>

  <body>
    <main class="main" id="top"> 
        <div class="container" data-layout="container">   
            <script>     
                var isFluid = JSON.parse(localStorage.getItem("isFluid"));     
                if (isFluid) {       
                    var container = document.querySelector("[data-layout]");       
                    container.classList.remove("container");       
                    container.classList.add("container-fluid");     
                }   
            </script>      
            @include('_nav-vertical')   
            <div class="content">     
                @include('_nav-top')
                {{ $slot }}
                @include('_footer')   
            </div>   
            {{-- @include('_modal')  --}}
        </div>
    </main>

    <script src="vendors/popper/popper.min.js"></script>
    <script src="vendors/bootstrap/bootstrap.min.js"></script>
    <script src="vendors/anchorjs/anchor.min.js"></script>
    <script src="vendors/is/is.min.js"></script>
    <script src="vendors/echarts/echarts.min.js"></script>
    <script src="vendors/fontawesome/all.min.js"></script>
    <script src="vendors/lodash/lodash.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="vendors/list.js/list.min.js"></script>
    <script src="assets/js/theme.js"></script>
  </body>
</html>

Answer 1

因为您目前正在加载您的 CSS 相对于您的 URL

尝试以下操作：

    <link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>

或查看：https://laravel.com/docs/9.x/helpers#method-asset

Answer 2

您实际上在 layout.blade.php 进行这些修改时以错误的方式加载资产。然后它会工作正常。将此应用于您的所有资产，如图像、CSS 和 JS 文件。像这样在花括号中对每个资产应用资产函数。

<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />

将此应用到所有 CSS 也像这样应用到 JS

<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>

还要确保所有文件都在磁盘上可用。

为什么 Laravel 组件无法正确呈现？取决于路线？

Why Laravel component does not render correctly? Depends on the route?

php

components

laravel