.razor 文件中的 Blazor 基本标记和 @page 指令答案

【问题标题】：Blazor base-tag and @page instruction in .razor files.razor 文件中的 Blazor 基本标记和 @page 指令
【发布时间】：2020-03-08 16:59:19
【问题描述】：

我开始使用Blazor 服务器端，但我没有正确路由。我不明白_host.cshtml 中需要base 标签。如果我仍然需要在每个 Blazor 组件中添加 base url，例如：我想要一个基地址 /app/ 和 @page 指令，例如 Counter 的值为 "/counter" 确实不是“编译”到"/app/counter"。我必须将@page 设置为"/app/counter"，这是有道理的，但这意味着_host.cshtml 中的base 标签是无用的......

我在这里做错了什么？

【问题讨论】：

标签： c# asp.net-core routing blazor-server-side

【解决方案1】：

<base href='' > 是一个 client side technology，它指定当前文档中所有相对 URL 的基本 URL。许多 SPA 框架，例如Angular，将使用此元素。

我必须将@page 设置为“/app/counter”

实际上，您不必也不应该这样做。使用 <base> 时最重要的优势之一是它允许我们在不让组件知道基本 url 的情况下创建应用程序。

假设您已将基础 href 从 '/' 更改为 '/app/'，并且还更改了其他相对 url：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp</title>
    <base href="/app/" />
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css" />
    <link href="/css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

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

不要忘记在默认的 Blazor 集线器 URL 前加上 /app/ ：

app.UseEndpoints（端点 => { endpoints.MapBlazorHub("/app/_blazor"); endpoints.MapFallbackToPage("/_Host"); });

就是这样。根本不需要将路由从@page "/counter" 更改为@page "/app/counter"。

演示

这是一个我们不更改组件的@page 路由的演示：

【讨论】：

嗨，我试过了，但它不起作用。无论如何感谢您的努力！我会进一步看，如果我发现了什么，我会在这里发布。
base-TAg 似乎在我的本地机器上无法本地工作。
@ElHippo IMO，“不起作用”的声明但没有细节将无助于解决问题。如果您向我们展示您的代码以便我们找到问题，那就太好了。
嗨，对不起。我完全根据您的示例更改了我的 startup.cs 和我的 _host.cshtml，但是在没有将 /app/ 添加到 @page 指令的情况下找不到组件。但我不确定我是否完全误解了这个问题。同时我找到了一种解决方法，以便我可以使用“/”作为基本路径。感谢您的努力！
你认为它是我们的吗？我有类似的问题，但我只想在代码在我的开发机器上运行时添加 /app/ 目录

【解决方案2】：

如果是 Blazor WebAssembly，您只需处理 index.html。

当您将网站发布到生产中的某个子文件夹（例如：yoursite.com/couch/web）时，请将 <base href="/"> 的代码代替放在 head 标记内，并用您自己的子文件夹替换 "/couch/web/"：

<script type="text/javascript">
    var appBase = document.createElement('base');
    appBase.href = "/couch/web/";
    if (window.location.href.indexOf("localhost") > -1)
    {
        appBase.href = "/";
    }
    document.head.appendChild(appBase);
</script>

结果是<base href="/couch/web/">在生产中自动生成，<base href="/">在本地开发时自动生成。

以后可以访问这个通过只读NavigationManager.BaseUri设置的基本href。

【讨论】：

【解决方案3】：

我遇到了同样的问题，因为我需要在一个 Nginx 服务器下托管多个应用程序。

非常重要：您必须在 Startup.cs 中的 ApplicationBuilder 的任何其他配置之前设置 PathBase。要动态设置路径，它是从 appsettings 中读取的

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UsePathBase(Configuration.GetValue<string>("PATH_BASE") ?? "/");
    ...
}

appsettings.json

{
    ...
    "PATH_BASE": "/mycustompath",
    ...
}

_Host.cshtml

<head>
    <base href="~/" />
    ...
</head>

导航和资源的所有链接都必须是相对的，例如

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

【讨论】：

【解决方案4】：

解决办法是there

在 Startup.Configure 中添加app.UsePathBase("/app");
在_Host.cshtml中的<head>下面添加<base href="/app/">

【讨论】：

这对我也不起作用。尝试文档中提到的 dotnet 命令时，我的所有路由仍然转到 localhost:{port} 而不是 localhost:{port}/app。实际上 /app 位置似乎没有提供任何服务。
看来我可能做错了什么。我创建了一个新项目，上述方法对我有用。我仍然有问题，不得不修复一些非相对路径到相对路径。计数器页面还有错误

【解决方案5】：

为了让它完全工作，我必须结合 Softlion 修复

在 startup.cs 文件中，这也是必需的。它也需要在configure方法的第一行，否则会发生不好的事情

        app.UsePathBase("/app");

这样您的相对链接也可以使用。例如，我有一个登录页面的链接。

        <a href="~/Login">Login</a>

----------编辑额外信息------

我刚刚发现西装外套对外壳非常挑剔。这在 IIS 和 Visual Studio 中都会发生

        <base href="/app/" />
        app.UsePathBase("/app");

和

不一样

        <base href="/App/" />
        app.UsePathBase("/App");

你必须让这些匹配。不仅如此，您还必须使用相同的外壳导航到您的 Web 应用程序。

由于 url 不一样并且在 javascript 调试器中抛出问题，我提出了一个 github 问题

本地主机：5001/应用程序

https://github.com/dotnet/aspnetcore/issues/23107

【讨论】：

【解决方案6】：

只需<base href='/app/' > + dotnet run --pathbase=/app （来自there）

【讨论】：