Angular 重定向到错误的网址？

Question

I'm learning angular and I would like to make a simple app, where the user can jump between two components back and forth. One way it is working. But when I try like this to go back from navbar to login:

<a routerLink="login" class="nav-item nav-link" href="#">Logout</a>

I get an error that it tries to reach "navbar/login" (instead of /login) which obviously does not exist.

When I try this way:

<a (click)="handleSubmitLogout()" class="nav-item nav-link" href="#">Logout</a>

And in ts:

handleSubmitLogout() {
    this._router.navigateByUrl('login');
  }

It goes back to login but after a second it gets redirected to empty url.

My app-routing:

import {LoginComponent} from './login/login.component';
import {NavbarComponent} from './navbar/navbar.component';

const routes: Routes = [

  {path: 'login', component: LoginComponent},
  {path: 'navbar', component: NavbarComponent},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Thank you for your help!

Answer 1

 <a routerLink="/login" class="nav-item nav-link" >Logout</a>

or

 handleSubmitLogout() { this._router.navigate(['/login']); }

Answer 2

Assign the anchor tag that you want to add the route to the routerLink attribute.

<a routerLink="/login" class="nav-item nav-link" >Logout</a>

Defining a basic route