Angular配置动态路径路由时搜索页路由被拦截无法跳转

• Angular路由按照配置顺序从上到下匹配，命中符合规则的条目后就会终止匹配。你之前配置的**通配路由优先级过高，会拦截所有下层路径，后续配置的搜索路由永远不会被命中。
• 路由参数占位符不能使用:string写法，:string是TypeScript的类型语法，Angular路由的参数占位符需要自定义合法名称，比如:name、:tenantCode这类自定义标识。
• 跳转代码直接拼接字符串的写法容易出现路径层级错误，且没有指定根路径起始，容易受当前路由层级影响跳转失败。

1. 调整路由配置顺序与规则 #

把精确匹配的搜索路由放在通配路由前面，修正参数占位符写法，参考如下配置：

const appRoutes: Routes = [
  // 精确路由必须放在通配路由之前，优先匹配
  {
    path: ':dynamicName/search',
    component: ProductListComponent
  },
  // 动态名称首页路由
  {
    path: ':dynamicName',
    component: HomeComponent
  },
  // 根路径兜底，可根据业务需求跳转默认名称页或直接加载首页
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/name1'
  },
  // 最后放全局兜底通配，避免非法路径报404
  {
    path: '**',
    component: HomeComponent
  }
];

不建议在空路径的children里嵌套**通配，这种写法很容易出现路由优先级冲突，把动态路径显式声明为一级路由，逻辑更清晰，匹配规则更可控。

2. 组件内获取动态参数 #

在ProductListComponent中注入路由服务，获取路径上的动态名称参数：

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

export class ProductListComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      // 这里的dynamicName和路由配置里的参数占位符保持一致
      const currentName = params['dynamicName'];
      // 拿到动态名称后执行搜索逻辑即可
    });
  }
}

3. 修正跳转代码 #

不要手动拼接路径字符串，使用路由参数数组的写法跳转，避免路径拼接错误：

// currentName是你提前获取到的当前动态名称，比如name1、name2
this.router.navigate(['/', currentName, 'search']);

路径开头的/代表从应用根路径开始跳转，不会受当前组件所在路由层级影响，不会出现多嵌一层路径的问题。

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