@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路由自动保护