@angular/router
包,并在需要使用路由的模块中导入 RouterModule
和 Routes
:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
Routes
数组中定义路由路径和组件:const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '/home' }
];
其中,path: '**'
表示任何未匹配的路径都会重定向到 /home
路径。
@NgModule
的 imports
数组中添加 RouterModule.forRoot(routes)
来配置路由:@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
至此,当用户输入无法匹配的路径时,路由会自动重定向到 /home
页面。
示例代码:
app-routing.module.ts:
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: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '/home' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在 app.component.html 中插入链接:
下一篇:Angular路由自动保护