Angular懒加载子路由通过[routerLink]跳转时自动重定向到父路由问题

该问题由点击事件冒泡触发父级菜单的路由跳转导致，和路由配置本身无关：
你当前的菜单DOM结构中，子菜单的<li>嵌套在绑定了父路径[routerLink]的父菜单<li>内部。点击子菜单时，点击事件会向上冒泡到父元素，先后触发子、父两个路由跳转，因此会出现子路径在地址栏一闪而过，随后被重定向到父路径的现象。
直接在地址栏输入地址不会触发点击事件，因此路由加载完全正常，和你实际观测到的表现完全吻合。

任选以下一种即可修复：

• 给子菜单点击事件添加阻止冒泡逻辑
  模板代码修改为：

  <ul>
    <li *ngFor="let item of menu">
      <!-- 仅给父菜单标题绑定routerLink，不要包裹子菜单 -->
      <span [routerLink]="item.url">{{ item.title }}</span>
      <ul>
        <li *ngFor="let subItem of item.children" 
            [routerLink]="[item.url, subItem.url]"
            (click)="$event.stopPropagation()">
            {{ subItem.title }}
        </li>
      </ul>
    </li>
  </ul>
  

  仅需要在子菜单的点击事件中添加$event.stopPropagation()即可阻止事件冒泡到父元素。
• 调整DOM嵌套结构，不要将子菜单放在绑定了[routerLink]的父元素内部，避免事件冒泡触发多余的路由跳转。
• 父菜单如果仅需要展开/收起功能，不要给外层容器绑定[routerLink]，单独给需要跳转的文本节点绑定路由即可。

内容的提问来源于stack exchange，提问作者Jesús Silva