首页 > 其他分享 >Blazor笔记-Navigating

Blazor笔记-Navigating

时间:2024-03-07 15:36:55浏览次数:25  
标签:code NavLink 笔记 Match Navigating Blazor navManager

更新记录

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

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

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

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

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.

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);
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;
    }
}

标签:code,NavLink,笔记,Match,Navigating,Blazor,navManager
From: https://www.cnblogs.com/cqpanda/p/17596518.html

相关文章

  • Blazor笔记-JavaScript Interop(JS互调用)
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Route
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-深入
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component styles
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Form components
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component Dom Manage
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component Layout
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component EventCallback
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component RenderFragment / ChildContent
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • calypso学习笔记
    运行中问题1.集群提交节点运行出错,生成很多results错误原因:将运行命令./calipso.x写在了submit.sh文件中,跑calypso.x的时候会调用提交submit.sh,这么写相当于多次提交了calypso.x;把calypso这个命令写进脚本跑的意思是把这个命令单独写进一个脚本里提交2.本地运行./calypso.x......