路由使用前提
1 创建组件
2 引入组件(app.module.ts)
3 app.routing.ts中引入组件
4 配置路由
路由配置
const routes:Routes=[
{path:'home',component:HomeComponent},
{path:'news',component:NewsComponent},
{path:'**',redirectTo:'home'}, 默认路由匹配不到路由时 跳转home
]
路由跳转
<a routerLink="/home">
<a [routerLink]="['/home']" routerLinkActive="active">
routerLinkActive 选中路由跳转状态 active 类名
路由跳转传值
get传值
<a [routerLink]="['/home']" [queryParams]="{id:123}"></a>
接收
import {ActiveRoute} from "@angular/router"
constructor(public route:ActiveRoute){}
this.route.queryParams.subscribe((data)=>{console.log(data)})
动态路由传值
const routes:Routes=[
{path:'news',component:NewsComponent},
{path:'newsContent/:id',component:NewsContentComponent},
]
<a [routerLink]="['/newsContent/',key]"></a>
key 表示传递的值
获取
import {ActiveRoute} from "@angular/router"
constructor(public route:ActiveRoute){}
this.route.params.subscribe((data)=>{console.log(data)})
js跳转路由
方法1 动态路由js跳转
import {Router} from '@angular/router'
constructor(public router:Router){}
this.router.navigate(['/news','1234'])
this.router.navigate(['/news'])
方法2 get传值路由跳转
import {Router,NavigationExtras} from '@angular/router'
constructor(public router:Router){}
let navigationExtras:NavigationExtras = {
queryParams:{id:'123'}
}
this.router.navigate(['/news'],navigationExtras)
父子路由
const routes:Routes=[
{path:'home',component:HomeComponent,
children:[{path:'welcom',component:WelcomComponent},
{path:'**',redirectTo:'welcom'}]
},
{path:'news',component:NewsComponent},
{path:'**',redirectTo:'home'}, 默认路由匹配不到路由时 跳转home
]
<a [routerLink]="['/home/welcom']"> 跳转
<router-outlet></router-outlet> 挂载