Angular路由中如何设置带默认查询参数的URL路径

先说明你当前路由配置的两处问题：

• 路由path不能写creativeID?:id，查询参数不属于路由路径的组成部分，路由路径仅匹配URL的路径段，查询参数是独立于路径的额外参数。
• redirectTo字段不能直接拼接查询参数，需要通过路由配置的专属属性来设置。

下面提供两种可行的实现方案：

方案一：通过路由重定向直接设置默认参数 #

这种方式无需组件内额外逻辑，应用启动时会自动将根路径重定向到带默认查询参数的URL：

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
    // 配置默认查询参数
    queryParams: { creativeId: 'bydefaultId' },
    // 可选配置：如果URL已有其他查询参数，保留并合并默认参数
    queryParamsHandling: 'merge'
  },
  {
    path: '',
    component: AdPageComponent
  }
];

方案二：在组件内检测并补充默认参数 #

如果需要根据动态条件设置默认值，可在组件初始化时检查查询参数，不存在则自动添加：

简化后的路由配置： #

const routes: Routes = [
  {
    path: '',
    component: AdPageComponent
  }
];

在AdPageComponent中添加逻辑： #

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

@Component({
  selector: 'app-ad-page',
  templateUrl: './ad-page.component.html',
  styleUrls: ['./ad-page.component.css']
})
export class AdPageComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    // 获取当前查询参数中的creativeId
    const creativeId = this.route.snapshot.queryParamMap.get('creativeId');
    // 无参数时跳转并添加默认值
    if (!creativeId) {
      this.router.navigate([], {
        queryParams: { creativeId: 'bydefaultId' },
        queryParamsHandling: 'merge'
      });
    }
  }
}

两种方案都能实现需求：应用启动时默认展示http://localhost:4200/?creativeId=bydefaultId并加载对应ID的图片。

内容的提问来源于stack exchange，提问作者rahemanali