1. 在组件中导入ActivatedRoute和Router模块。

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

2. 在构造函数中注入这两个模块。

constructor(private route: ActivatedRoute, private router: Router) { }

3. 使用导航按钮或其他事件来触发路由函数，该函数将使用不同的查询参数导航到同一个页面。在导航中，路由参数可以是动态的，这意味着根据用户的不同操作，我们可以生成不同的路由导航。

navigateToPage(param: string) {
    this.router.navigate([], {
        relativeTo: this.route,
        queryParams: {
            type: param
        },
        queryParamsHandling: 'merge'
    });
}

• relativeTo ：指定相对于哪个路由器进行导航。
• queryParams：设置查询参数。
• queryParamsHandling：合并当前的查询参数，而不是完全替换它们。

4. 在组件内部订阅参数的变化，每当查询参数发生变化时，我们可以基于这些参数更新页面。

this.route.queryParams.subscribe(params => {
    if (params) {
      // Do something with the params
    }
});

例如，我们可以使用以下HTML来触发路由。

Show news
Show events
Show blogs

上述方法将在我们需要使用相同页面的情况下，动态地在Angular应用程序中导航路由并使用不同的查询参数。