Blazor-轻松掌握Blazor导航与URL处理

URl的获取

使用 NavigationManager 的 Uri 属性获取当前页面的URI,内容简单我们直接来上代码

代码样例

@page "/demoPage"
@rendermode InteractiveAuto
@inject NavigationManager Navigation
<h3>DemoPage</h3>
<p>当前url @url</p>
<p>当前基url @baseUrl</p>

<button @onclick="NavUri">确定</button>
@code {
    private string? url;
    private string? baseUrl;

    private void NavUri()
    {
        // 获取当前URL
        url = Navigation.Uri;
        // 获取当前基URL
        baseUrl = Navigation.BaseUri;
    }
}

运行展示

我们在上面的代码中获取了绝对的url和基础url
绝对URL

Navigation.Uri

基本URL

Navigation.BaseUri

导航跳转

导航的跳转我们使用 NavigationManager 的 NavigateTo()方法

NavigateTo (string uri, bool forceLoad) 参数说明如下：
(1) string uri：导航到的具体URL，可以是相对 URL，也可以是绝对 URL。如果转向外部 URL，则必须为绝对 URL。
(2) bool forceLoad：如果为false，使用 Blazor 增强型导航(局部加载，增量更新 DOM)。如果为true，绕过客户端路由，浏览器都必须从服务器整体加载完整页面。

我们尝试跳转到https://localhost:7034/counter页面

代码展示

@page "/demoPage"
@rendermode InteractiveAuto
@inject NavigationManager Navigation
<h3>DemoPage</h3>

<button @onclick="Navigate">跳转</button>

@code {
    private void Navigate()
    {
        Navigation.NavigateTo("/counter");
    }
}

运行展示

点击跳转后，可以跳转到我们指定的页面，在路由中我们可以填写完整的路径也可以填写相对url

Navigation.NavigateTo("/counter");
Navigation.NavigateTo("counter");
Navigation.NavigateTo("https://localhost:7034/counter");

以上的三种写法均可运行，等效果

绝对URL和相对URL相互转换

Navigation.ToBaseRelativePath()方法，可以将绝对 URI 转换为相对 URI。
Navigation.ToAbsoluteUri()方法，可以将相对 URI 转换为绝对URI
下来我们直接看示例

代码样例

@page "/demoPage"
@rendermode InteractiveAuto
@inject NavigationManager Navigation
<h3>DemoPage</h3>
<p>绝对路径转相对路径：@absoluteUri</p>
<p>相对路径转绝对路径：@baseRelativeUri</p>
<button @onclick="SwitchUri">转换</button>

@code {
    string? absoluteUri = string.Empty;
    string? baseRelativeUri = string.Empty;
    private void SwitchUri()
    {
        absoluteUri = Navigation.ToAbsoluteUri("/counter").ToString();
        baseRelativeUri = Navigation.ToBaseRelativePath("https://localhost:7034/counter");
    }
}

运行展示

往期相关推荐

Blazor-处理URL中查询参数