Blazor（详细信息）页面重新加载导致 javascript 错误答案

【问题标题】：Blazor (detail) page reload causes javascript errorsBlazor（详细信息）页面重新加载导致 javascript 错误
【发布时间】：2019-11-03 07:11:11
【问题描述】：

我为自己构建了一个小型 Blazor 网站，使用一个免费模板，其中包含一堆 javascript 文件。除了一件事，一切似乎都运行良好。

当用户重新加载（F5）项目详情页面时，所有的 html 标记都消失了，控制台显示一堆错误日志，表明它找不到相关的 javascript 文件。重新加载任何其他页面都可以正常工作。

这是剃须刀页面

@page "/project/{Slug}"

@using DOGA.Data
@using DOGA.Services
@inject ProjectService projectService
@inject NavigationManager navigationManager

@if (_project == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <section id="pricing" class="pricing-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="section-title text-center pb-20">
                        <h3 class="title">@_project.Name</h3>
                        <p class="text">
                            @((MarkupString)_project.Description)

                            @if (_project.BulletPointList.Items.Any())
                            {
                                <br />

                                @_project.BulletPointList.Name
                                <br />
                                <br />
                                <ul style="text-align:left;">
                                    @foreach (var item in _project.BulletPointList.Items)
                                    {
                                        <li>
                                            <i class="lni-check-mark-circle"></i> @item
                                        </li>
                                    }

                                </ul>
                            }
                        </p>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            @foreach (var image in _project.DetailImages)
            {
                <div class="row justify-content-center">
                    <div class="col-lg-12 col-md-7 col-sm-9">
                        <div class="pricing-style-one mt-40 wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s">
                            <div class="pricing-header text-center">
                                <h5 class="sub-title">@image.ImageName</h5>
                            </div>
                            <div class="text-center">
                                <img src="@image.ImageLink" alt="@image.ImageName">
                            </div>
                            <div class="text-center top-buffer">
                                <br />
                                @image.ImageDescription
                            </div>
                            @if (image.BulletPoints.Any())
                            {
                                <br />

                                <div class="pricing-list">
                                    <ul>
                                        @foreach (var item in image.BulletPoints)
                                        {
                                            <li><i class="lni-check-mark-circle"></i> @item</li>
                                        }
                                    </ul>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    </section>
}

@code {
    [Parameter]
    public string Slug { get; set; }

    private Project _project { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _project = await projectService.GetProjectAsync(Slug);

        if (_project == null)
        {
            navigationManager.NavigateTo("/");
        }
    }
}

错误出现在本地和已发布的 azure 网站上。

该站点目前部署在 azure 上。请注意，它是荷兰语。进入投资组合页面时出现错误，单击三个项目之一，然后硬刷新。 https://dogasolutions.azurewebsites.net/

编辑：通过添加“/”（感谢 gsharp）修复引用后，页面似乎重新加载正常，除了 blazor javascript 文件。

在_host.cshtml的body标签里面：

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="/_framework/blazor.server.js"></script>

【问题讨论】：

刷新时，您的应用程序尝试访问dogasolutions.azurewebsites.net/project/assets/js/slick.min.js，但文件位于dogasolutions.azurewebsites.net/assets/js/slick.min.js ..检查您引用脚本的位置...可能您将其引用为“/assets/js /slick.min.js”而不是“assets/js/slick.min.js”
这正是发生的事情！谢谢你。但是，blazor javascript 文件不会以这种方式工作。该页面确实重新加载正确，但控制台仍然记录有关 blazor 的错误。（见我的编辑）
我认为没有“/”的 blazor 文件很好，因为它是由框架添加的。可以试试吗？
如果没有“/”，它会像以前一样向脚本提供 404。我认为没有它也能正常工作是合乎逻辑的，因为默认情况下是这样，但显然不是。
您的“_framework/blazor.server.js”（host.cshtml、layout.cshtml、layout.razor...）在哪里？你可以发布代码吗？ dogasolution.azurewebsites.net 和dogasolutions.azurewebsites.net/portfolio 是同一个站点吗？

标签： c# blazor

【解决方案1】：

我发现了罪魁祸首。我使用在线模板替换了我的大部分_Host.cshtml 文件。通过这样做，我覆盖了head 标记中的base 标记。

只需在我的head 标记中添加以下代码即可完全解决问题。

<base href="~/" />

如果没有这个，blazor 无法在进入详细信息页面时正确解析连接（例如 domain/page/{parameter}）

【讨论】：