angular 路由跳轉以及傳參的幾種方式
通過域名跳轉的方式獲取引數(http://localhost:4200/second/110?productId=1&title=moon)
這種方式配置路由,其中:id是必需的引數,其它的是可配的,寫在?後面:
{ path: 'second/:id', component: SecondComponent },
通過ts程式碼跳轉:
this.router.navigate(['/second',110], { queryParams: { productId: '1', title: 'moon' } });
獲取【:id】引數的方式:
constructor(private route: ActivatedRoute, private router: Router) { } var id = this.route.snapshot.paramMap.get('id');
在comoent中需要這麼獲取‘?’ 後面的引數,將引數寫在queryParams裡
this.router.navigate(['/second',110], { queryParams: { productId: '1', title: 'moon' } });
通過ActivatedRoute來獲取
constructor(private route: ActivatedRoute, private router: Router) { } ngOnInit() { var id = this.route.snapshot.paramMap.get('id'); this.name = id; console.log(id); this.route.queryParams.subscribe(param => { console.log(param); console.log(param.title); console.log(param['title']); console.log(param.productId); console.log(param['productId']); }); }
1.this.router.navigate(['user', 1]);
以根路由為起點跳轉
2.this.router.navigate(['user', 1],{relativeTo: route});
預設值為根路由,設定後相對當前路由跳轉,route是ActivatedRoute的例項,使用需要匯入ActivatedRoute
3.this.router.navigate(['user', 1],{ queryParams: { id: 1 } });
路由中傳引數 /user/1?id=1
4.this.router.navigate(['view', 1], { preserveQueryParams: true });
預設值為false,設為true,保留之前路由中的查詢引數/user?id=1 to /view?id=1
5.this.router.navigate(['user', 1],{ fragment: 'top' });
路由中錨點跳轉 /user/1#top
6.this.router.navigate(['/view'], { preserveFragment: true });
預設值為false,設為true,保留之前路由中的錨點/user/1#top to /view#top
7.this.router.navigate(['/user',1], { skipLocationChange: true });
預設值為false,設為true路由跳轉時瀏覽器中的url是跳轉前的路徑,但是傳入的引數依然有效
8.this.router.navigate(['/user',1], { replaceUrl: true });
未設定時預設為true,設定為false路由不會進行跳轉
9.頁面裡url路轉寫法
<nav> <a routerLink="/heroes/{{id}}">點選檢視文章詳情</a> <!--陣列格式傳參,注是第二種試的routerLink是用[]包括--> <a [routerLink]="['/heroes', num]">點選檢視文章詳情</a> </nav>