使用Nebular菜单栏item的url属性时如何避免页面重载

问题出在你使用了NbMenuItem的url属性——这个属性会触发原生浏览器跳转，直接刷新整个页面。要实现Angular单页应用的无刷新路由导航，换用Nebular支持的Angular路由配置方式即可：

最简单的解决方法：替换url为link属性 #

修改你的Menu.ts，把每个菜单项的url换成link，注意路径要和你的路由配置匹配（如果是根路由下的子路径，记得加斜杠）：

import { NbMenuItem } from "@nebular/theme";

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: "Orders",
    icon: "email-outline",
    link: "/orders",
  },  
  {
    title: "Customers",
    icon: "person-outline",
    link: "/customers",
  },
];

进阶：自定义菜单模板（如需更灵活的路由配置） #

如果需要带查询参数、路由参数等复杂路由场景，可以自定义菜单模板，手动绑定routerLink：

<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
  <nb-menu [items]="menu">
    <ng-template nbMenuItemTemplate let-item>
      <a [routerLink]="item.link" routerLinkActive="active">{{ item.title }}</a>
    </ng-template>
  </nb-menu>
</nb-sidebar>

这种情况下，Menu.ts里依旧用link属性配置路由路径即可。

你的路由模块配置已经正确包含了orders和customers子路由，这部分不需要修改。

核心原因：Nebular的link属性是专门为Angular Router设计的，会触发单页应用的无刷新导航；而url属性是用于外部链接或需要原生跳转的场景，这就是点击后页面刷新的根源。

内容的提问来源于stack exchange，提问作者vijay s