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