Angular 7 路由不能正常工作它刷新页面

Question

这是我遇到的问题：

当我 select 导航栏中的某个选项卡时，我不想刷新我的网站。我是 angular 的新手，据我所知，路由器应该在不重新加载 link.

的情况下路由到页面

我在应用程序路由模块中的代码

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>

节日快乐！

Answer 1

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

例如

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

Angular 7 路由不能正常工作它刷新页面

Angular 7 routing doesn't work properly it refreshes the page

html

routing

frontend

angular

angular7