angular路由跳转及传参多种方式详解

1、指令routerLink跳转：

<a [routerLink]="['/evaluation/rate']" [queryParams]="{id: 123}">
  用户列表
</a>

相对链接路径官方解释：
第一段名称可以用 /、./ 或 …/ 开头。

• 如果第一个片段用 / 开头，则路由器会从应用的根路由开始查找。
• 如果第一个片段用 ./ 开头或者没有用斜杠开头，路由器就会从当前激活路由开始查找。
• 如果第一段以 …/ 开头，则路由器将去往路由树中的上一层。
  设置和处理查询参数和片段

2. router.navigate

写法一：把数组地址拼接成完整 url
写法二：等同写法一，自己拼地址
写法三：自动查找 route 配置里面的 rate路由跳转
skipLocationChange参数介绍：跳转后不改变 url，不想暴露地址的可以加上

/* 首先注入服务 */
constructor(private route: ActivatedRoute, private router: Router) { }

/* 跳转 写法一 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['evaluation', 'rate'], { queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* 跳转 写法二 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['/evaluation/rate'], { queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* 跳转 写法三 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['rate'], { relativeTo: this.route,  queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* router配置为： */
const routes: Routes = [
  {
    path: 'evaluation',
    children: [
      {
        path: '',
        component: EvaluationComponent,
      },
      {
        path: 'rate',
        component: RateComponent,
        runGuardsAndResolvers: 'paramsOrQueryParamsChange',
      }
    ]
  },
]

3. router.navigateByUrl

/* 首先注入服务 */
constructor(private router: Router) { }

this.router.navigateByUrl('/evaluation/rate?score=50&level=1');

参数获取：

 ngOnInit() {
  // 获取快照
  this.score = this.route.snapshot.queryParams['score'];

 // 订阅路由参数变化
  this.route.params.subscribe(params => {
    const paramValue = params['score'];
    console.log(paramValue);
  });
 
  // 订阅queryParams变化
  this.route.queryParams.subscribe(queryParams => {
    const paramValue = queryParams['score'];
    console.log(paramValue);
  });
 
  // 订阅fragment变化
  this.route.fragment.subscribe(fragment => {
    console.log(fragment);
  });
 }