.razor文件中的Blazor基本标签和@page指令

本文介绍了.razor文件中的Blazor基本标签和@page指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在服务器端开始使用 Blazor ，但是路由不正确.我不了解在 _host.cshtml 中是否需要 base 标记.例如，如果仍然需要在每个Blazor组件中添加 base 网址，例如:我想具有/app/的基地址和 @page Counter 的/code>指令的值为"/counter" 不会编译"为"/app/counter" .我必须将 @page 设置为"/app/counter" ，这很有意义，但这意味着 _host中的 base 标记.cshtml 是没有用的...

我在这里怎么了?

解决方案

< base href =''> 是

I am getting started with Blazor server-side and I don't get the routing right. I don't understand the need for the base tag in _host.cshtml. If I still have to add the base url in every Blazor component, for example: I want to have a base address of /app/ and the @page directive for the example Counter with a value of "/counter" does not "compile" to "/app/counter". I have to set the @page to "/app/counter" which makes sense but that means that the base Tag in _host.cshtml is useless...

What am I getting wrong here?

解决方案

The <base href='' > is a client side technology that specifies the base URL for all relative URLs in current document. Many SPA frameworks , e.g. Angular, will use this element.

Actually, you don't have to and should never do that. One of the most important advantages when using <base> is that it allows us to create an app without letting the components know about the base url.

Assuming you've changed the base href from '/' to '/app/', and also changed the other relative urls:

<!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>

Don't forget to prepend the default Blazor Hub url with a /app/ :

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

That's all. There's no need to change the routes from @page "/counter" to @page "/app/counter" at all.

Demo

Here's a demo that we don't change the @page routes for components:

这篇关于.razor文件中的Blazor基本标签和@page指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！