angular路由跳转,重定向,404页面

1. 创建建组件后, app.module.ts文件中引入angular/router,并引入创建好的组件

2. 在NgModule中的imports中添加路由

RouterModule 的 forRoot() 方法来定义你的路由。该方法接受一个 JavaScript 对象数组，每个对象定义一个路由的属性。forRoot() 方法确保你的应用只会实例化一个 RouterModule

3. 在app.component模板中编辑模板通过UI元素控制导航,并添加标签

routerLink。该指令将你定义的路由连接到模板文件中(点击跳转到指定显示的界面)

routerLinkActive 指令，可以通知你的应用把一个特定的 CSS 类应用到当前的活动路由中

4. 添加重定向,在module.ts中的imports中添加{ path: '', redirectTo: '/heroes-list',pathMatch:'full' }

redirectTo。这个属性指示 Angular 从空路径重定向到 heroes-list 路径

pathMatch。这个属性指示 Angular 要如何匹配 URL , full表示当路径为空字符串时，使用此路由

5. 添加404页面(用户可以尝试访问你尚未定义的路由。为了解决这个问题，最佳做法是显示一个 404 页面)

在app.module.ts文件中的imports添加{path: '**', component: PageNotFoundComponent}

路由使用路径 **。这个路径是 Angular 表示通配符路由的方式。任何与你配置中的路由都不匹配的路由都会使用这个路由。(注意通配符路由要放在数组的末尾,angular执行会按顺序应用路由并使用所找到的第一个匹配项)