如何使用角度和电子处理路由

正在更改 href 在导航栏中: #<componentName> 已修复此问题。 示例:

<li class="nav-item waves-light" mdbRippleRadius>
                <a class="nav-link" href="#about">About</a>
</li>

创建一个AppRoutingModule,可以将其导入到中的导入数组中 应用程序。单元ts ,然后在 应用程序。工艺路线。单元ts (其中@angular/cli询问您是否要在安装时包含)创建如下内容,

const routes: Routes = [
  { path: 'pageOne', component: PageOneComponent},
  { path: 'pageTwo', component: PageTwoComponent},
  { path: '', redirectTo: '/pageOne', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent}
];

因此,第一个和第二个“路径”指向您希望路由到的页面/组件,而第三个是应用程序的默认“登录页”,最后一个是访问无效路由时显示的内容。 不用说,这些组件(包括page not found组件)必须存在并导入到 应用程序。工艺路线。单元ts 。

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

还要在routes数组之后添加上述代码。 要访问这些路由中的任何一条,只需使用锚点/按钮,如 <a routerLink="/pageOne">Go To Page One</a>