在路由模块中为每个路径添加一个 component
属性来保证页面不会被覆盖。
解决方法示例:
路由模块中通过添加 component
属性来指定页面组件,如下所示:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的示例中,我们为每个路径都指定了一个组件,这样就能确保每个页面都有自己独立的路由插座,不会被其他页面的插座覆盖掉。
需要注意的是,在这种情况下,如果需要在页面中加载其他组件,我们需要使用子路由来加载它们而不是在同一个插座中加载。