Question

这是我遇到的问题：

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

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

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路由无法正常工作，它会刷新页面

1 个答案: