Blazor笔记-Navigating

更新记录#

注意：非教程。纯笔记，日常查询用的。需要教程的小伙伴找几本书看看即可哈哈，有Vue基础的话非常快，概念都是通的。非工作需要不建议深入学习Blazor，深入Vue吧，用的多，哈哈。

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

点击查看

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Navigating#

Website navigation allows visitors to navigate between different pages, allowing them to easily move from one page to another as they continue browsing.

Types of navigation#

Navigating by link
Navigating by code

Navigating by link#

To create a link for the user to click, you have two options: the NavLink component and the <a> HTML tag.

NavLink component

<NavLink href="about" ActiveClass="active-link">About Us</NavLink>

Understanding the NavLinkMatch enum

<NavLink href="about" Match="NavLinkMatch.Exact" ActiveClass="active">About Us</NavLink>

The Match parameter accepts a value from the NavLinkMatch enum, which has two possible options: Prefix and All.

When the Match parameter is set to NavLinkMatch.Prefix, a menu item will be highlighted if the browser's URL starts with the href value of the NavLink. This is the default behavior if the Match parameter is not specified.

when the Match parameter is set to NavLinkMatch.All, a menu item will be highlighted only if the browser's URL is exactly the same as the href value of the NavLink. This allows for a more precise match between the browser's URL and the NavLink's href.

Navigating by code#

When creating a Blazor application, there may be instances where you need to programmatically navigate to another page. To do this, you need to use the NavigationManager service. This service can be injected into your component, allowing you to use its methods to navigate to different pages.

@inject NavigationManager navManager

<button type="button" @onclick="NavigateToPage">Go to About</button>

@code {
    private void NavigateToPage()
    {
        navManager.NavigateTo("about");
    }
}

Forcing a page reload#

navManager.NavigateTo("about", forceReload: true);

Navigating without storing history#

navManager.NavigateTo("about", replace: true);

Detecting navigation#

In Blazor, the NavigationManager class allows you to detect and handle changes in the browser's location. One way to do this is by listening to the LocationChange event.

Here is an example of how to listen to the LocationChange event and handle it in your code:

@inject NavigationManager navManager
@implements IDisposable

...

@code {
    protected override void OnInitialized()
    {
        navManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs eventArgs)
    {
        Console.WriteLine($"Navigation detected. {eventArgs.Location}");
    }

    public void Dispose()
    {
        navManager.LocationChanged -= OnLocationChanged;
    }
}