How to avoid page-reload while using nebular menu-bar item's 'url' attribute-CodePudding

I am using the nebular theme for my application. On the menu items, I have two things. Each item needs to be navigated using the URL attribute of the nebular menu.

PROBLEM:

The navigation works fine. But, every time I click the item, refreshing happens. I want to avoid that reloading. So kindly help me fix this.

Menu.ts:

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

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

Routing-module.ts :

...
  {
    path: "",
    component: SidebarLayoutComponent,
    canActivate: [RoleGuard],
    data: { roles: [Role.admin] },
    children: [
      {
        path: "orders",
        component: AdminOrdersComponent,
      },
      {
        path: "customers",
        component: CustomerListComponent,
      },
    ],
  },
...

HTML:

<nb-layout windowMode>
  <nb-layout-header fixed>
    <app-header></app-header>
  </nb-layout-header>

  <nb-sidebar  tag="menu-sidebar" responsive>
    <nb-menu [items]="menu"></nb-menu>
  </nb-sidebar>

  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

CodePudding user response：

The API documentation tells you yu need to use [link] for router links, not [url]. So change the url key to link.