navigateByUrl と Angular ルーティング ジャンプのナビゲートに関する簡単な説明

E:\mySoft\Git\bin // 绝对路径。从盘符开始 Git\bin // 相对路径。从当前路径开始

this.router.navigate(['c']); // 绝对路径。 localhost:4200/c this.router.navigate(['./c']); // 相对路径。 localhost:4200/c

this.router.navigate(['c'],{ relativeTo:this.route }); // localhost:4200/b/c this.router.navigate(['c',1],{ relativeTo:this.route }); // localhost:4200/b/c/1

this.router.navigate([],{ relativeTo:this.route }); // localhost:4200/b

this.router.navigate(['c'],{ fragment:'zita' }); // localhost:4200/c#zita 现在么，成功跳转到路由c了。我又想从路由c跳转到路由a（携带锚点跳转） this.router.navigate(['a'], { preserveFragment: true}); // localhost:4200/a#zita

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); }); }