浅谈Angular路由跳转中的navigateByUrl和navigate

this.router.navigate(['c'],{ queryParams:{name:'zita'} });  // localhost:4200/c?name=zita

    现在么，成功跳转到路由c了。我又想从路由c跳转到路由a,有以下五种情况：

    （1）不携带参数跳转

    this.router.navigate(['a'], { queryParamsHandling: null });  // localhost:4200/a

    （2）携带参数跳转

    this.router.navigate(['a'], { queryParamsHandling: 'merge'});  // localhost:4200/a?name=zita

    执行完以下三种情况的代码后，看到的页面是路由a的页面哦！

    （3）携带参数。浏览器中的URL不变，参数会失效即,在路由a中打印的参数结果是{}

    this.router.navigate(['a'], { skipLocationChange: true });  // localhost:4200/c?name=zita

    （4）携带参数。浏览器中的URL不变，参数有效。在路由a中打印的参数结果是{name: "zita"}

    this.router.navigate(['a'], {skipLocationChange: true, queryParamsHandling: 'merge'});  // localhost:4200/c?name=zita

    （5）携带参数。浏览器中的URL不变，参数有效，并且携带上其他参数。在路由a中打印的参数结果是{name: "zita",sex: "female"}

    this.router.navigate( ['a'], {skipLocationChange: true, queryParamsHandling: 'merge', queryParams: { sex: 'female' } });  // localhost:4200/c?name=zita

在路由c中，点击浏览器的返回按钮，会忽略路由b而直接跳转回到路由b的上一层路由

this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

import { Router } from '@angular/router';

constructor( private router: Router) { }

import { Router, ActivatedRoute, Params } from '@angular/router';

ngOnInit() {

    this.route.queryParams.subscribe((params: Params) => {

      console.log(params);

    });

}