Angular 7 路由无法正常工作，它会刷新页面答案

【问题标题】：Angular 7 routing doesn't work properly it refreshes the pageAngular 7 路由无法正常工作，它会刷新页面
【发布时间】：2019-05-25 02:08:00
【问题描述】：

这是我遇到的问题：

当我在导航栏中选择一个选项卡时，我不想刷新我的网站。我是 Angular 新手，据我所知，路由器应该路由到一个页面而不重新加载链接。

我在 app-routing-module 中的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BlogComponent } from './blog/blog.component'
import { AboutComponent } from './about/about.component'

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'blog', component: BlogComponent},
  { path: 'about', component: AboutComponent}
];

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

我在 app.component.html 中的代码

<link href="https://fonts.googleapis.com/css?family=Kotta+One" rel="stylesheet">

<div class="sidenav">
<ul>
  <li><a href="/" class="custom-underline">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/about">About</a></li>

  <iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</ul>
</div>
<router-outlet></router-outlet>

节日快乐！

【问题讨论】：

标签： angular html routing frontend angular7

【解决方案1】：

您应该在链接中使用routerLink directive 而不是href。

例如

<a routerLink="/blog">Blog</a>

【讨论】：