Angular笔记 配置路由

找到 app-routing.module.ts 配置路由 引入组件

配置路由

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component'; 


const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
 //匹配不到路由的时候加载的组件 或者跳转的路由 {
 path: '**', /*任意的路由*/
 // component:HomeComponent 
redirectTo:'home'
}]

找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

<h1>
<a routerLink="/home">首页</a> 

<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>