angular路由学习

简单路由使用

1.导入和注册路由

• app.module.ts文件

③④可以抽出来写

---①
import {
    RouterModule,Routes } from "@angular/router"; 
---④导入组件
import {
    TimComponent } from './tim/tim.component';
import {
    HugoComponent } from './hugo/hugo.component'

// 路由配置组件 ---③路由文件
const appRoutes: Routes = [
  {
    path: 'tim',component: TimComponent },
  {
    path: 'hugo',component: HugoComponent },
]
imports: [
    RouterModule.forRoot(appRoutes) ---②
  ],

2.组件使用路由

routerLink 路由跳转
router-outlet 显示路由文件的地方
routerLinkActive (可以不写)，是激活的样式

<a routerLink="/tim" >Tim</a>
<a routerLink="/hugo" routerLinkActive="active">hugo</a>
<router-outlet></router-outlet>

通配符路由

** 为通配符，找不到路由跳转至该页面