如何在ASP.NET Boilerplate中修改应用Logo的跳转行为至首页？

我来帮你搞定这个Logo跳转的需求～你现在遇到的是服务端路由和客户端路由的差异问题：顶部导航栏里用的是ASP.NET Core的Tag Helper（asp-controller/asp-action），而侧边栏的MenuItem用的是ABP Angular项目的客户端路由（/app/home），想要统一跳转行为的话，只需要把Logo的链接改成Angular的客户端路由方式就行，有两种简单的实现方法：

方法一：直接使用routerLink（最简洁） #

修改你的topbar.component.html代码，把原来的Tag Helper属性替换成Angular的routerLink指令：

<a class="navbar-brand" routerLink="/app/home">
  <i class="fa fa-cubes"></i> Application Name
</a>

这样点击Logo就会和侧边栏的Home菜单项一样，通过客户端路由跳转到首页，不会触发整页刷新，完全符合SPA的交互体验。

方法二：通过Router服务手动跳转（适合需要额外逻辑的场景） #

如果之后你需要在跳转前加一些自定义逻辑（比如权限判断），可以用这种方式：

1. 先在topbar.component.ts中注入Angular的Router服务：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-topbar',
  templateUrl: './topbar.component.html'
})
export class TopbarComponent {
  constructor(private router: Router) {}

  // 添加跳转方法
  navigateToHome(): void {
    this.router.navigate(['/app/home']);
  }
}

2. 然后修改模板中的<a>标签，绑定点击事件：

<a class="navbar-brand" (click)="navigateToHome()">
  <i class="fa fa-cubes"></i> Application Name
</a>

两种方法都能实现和侧边栏菜单项一致的跳转效果，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Vivek Nuna