深度玩家可移步Angular - 常見路由任務

1、嵌套路由

const routes: Routes = [{path: 'first',component: FirstComponent,//同步加載//這就是嵌套路由↓children:[{path:'first-sub1',component:firstSub1Component},{path:'first-sub2',component:firstSub2Component},]},
];

深度玩家可移步Angular - Router?

2、路由跳轉

<!--在html標簽上加跳轉-->
<a routerLink="../second-component">Relative Route to second component</a>

import { Router } from '@angular/router';constructor(private router: Router) { }//各種跳轉方式
this.router.navigate(['items'], { relativeTo: this.route });
this.router.navigateByUrl("/team/33/user/11");
this.router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });
this.router.navigate(['team', 33, 'user', 11], {relativeTo: route});
this.router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});

3、路由傳參

//1.以根路由跳轉/login
this.router.navigate(['login']);//2.設置relativeTo相對當前路由跳轉，route是ActivatedRoute的實例，使用需要導入ActivatedRoute
this.router.navigate(['login', 1],{relativeTo: route}); //3.路由中傳參數 /login?name=1
this.router.navigate(['login', 1],{ queryParams: { name: 1 } }); //4.preserveQueryParams默認值為false，設為true，保留之前路由中的查詢參數/login?name=1 to /home?name=1
this.router.navigate(['home'], { preserveQueryParams: true }); //5.路由中錨點跳轉 /home#top
this.router.navigate(['home'],{ fragment: 'top' });//6.preserveFragment默認為false，設為true，保留之前路由中的錨點/home#top to /role#top
this.router.navigate(['/role'], { preserveFragment: true }); //7.skipLocationChange默認為false，設為true，路由跳轉時瀏覽器中的url會保持不變，但是傳入的參數依然有效
this.router.navigate(['/home'], { skipLocationChange: true });//8.replaceUrl默認為true，設為false，路由不會進行跳轉
this.router.navigate(['/home'], { replaceUrl: true }); 

4、路由參數獲取

import { ActivatedRoute } from '@angular/router';constructor( private route: ActivatedRoute ) {}//第一種：在查詢參數中傳遞數據----------------------------------------
//在路由中傳遞
{path:"address/:id"} => address/1 => ActivatedRoute.param.id//點擊事件傳遞
<a [routerLink] = "['/address',1]">//在不同等級頁面跳轉可以用snapshot（快照方式）
this.route.snapshot.params.id
this.route.snapshot.queryParams.id//相同組件跳轉需要使用subscribe(訂閱方式)
this.route.params.subscribe((params: Params) => this.id = params.id )//第二種：在路由路徑中傳遞參數數據----------------------------------------
<a [routerLink] = "['/address']" queryParams= "{id:1}">
this.route.snapshot.queryParams.id//拿到路由中的參數（即瀏覽器網頁地址中url后面的?參數=）//第三種：在路由配置中傳遞數據----------------------------------------
{path:'home', component: HomeComponent，data:[{isPush:true}] } 
=> 
ActivatedRoute.data[0][isPush]
//同樣也是有snapshot和subscribe兩種類型
this.route.snapshot.data[0]['isPush']

如何修改當當前網頁中url的參數Angular如何修改當前頁面網頁瀏覽器url后面?param1=xxx?m2=xxx參數_你摯愛的強哥?給你發來1條消息?-CSDN博客app.component.html<button (click)="location.replaceState('/a/a/','?id=1&pageIndex=2&pageSize=10#hashValue');path1=this.location.path(true);path2=this.location.path(false)">修改當前瀏覽器url參數</button><p>【含hash的url】{{path1}}</p>https://s-z-q.blog.csdn.net/article/details/120576030

總結

以上是生活随笔為你收集整理的几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。