angular8 路由相关

路由使用前提

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>     挂载