Aurelia问题：带视口的子路由中无法访问Router

我之前在Aurelia里做多视口子路由开发时，也踩过一模一样的坑，给你几个亲测有效的排查和解决思路，按顺序走基本就能搞定：

1. 先确认菜单组件的Router注入是否正确 #

这是最容易被忽略的核心点！你的菜单组件必须通过Aurelia的依赖注入机制来获取Router实例，不能依赖“自动绑定”。比如菜单的ViewModel要这么写：

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Router)
export class MenuComponent {
  constructor(private router: Router) {
    // 可以加个日志确认注入状态，排查是不是初始化阶段的问题
    console.log('Menu组件的Router实例:', this.router);
  }

  // 也可以在attached生命周期里再检查，避免构造函数里未完成初始化的情况
  attached() {
    console.log('组件挂载时的Router:', this.router);
  }
}

如果没加@inject(Router)装饰器，就算路由配置完全正确，组件里的router变量也会是undefined。

2. 核对子路由视口配置与模板的匹配度 #

检查子路由配置里的viewPorts键，是否和模板中<router-view>的name属性完全一致（包括大小写）。举个正确的子路由配置示例：

// 子路由模块的ViewModel，比如child.ts
export class ChildModule {
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([
      {
        route: '',
        name: 'child-default',
        viewPorts: {
          // 这个键必须和模板里的router-view name="menu"完全匹配
          menu: { moduleId: 'components/menu' },
          content: { moduleId: 'components/child-content' }
        }
      }
    ]);
    this.router = router;
  }
}

对应的父组件模板（比如child.html）里的视口要写成：

<router-view name="menu"></router-view>
<div class="content-area">
  <router-view name="content"></router-view>
</div>

视口名称不匹配的话，组件加载时的Router上下文会错乱，直接导致拿不到实例。

3. 显式给RouterView绑定Router实例 #

你提到试过显式绑定，但可能方式不对。如果子路由的Router上下文存在异常，可以强制把父级的Router传递给视口。比如在加载子路由的父组件模板里：

<!-- 如果父组件本身已有router实例（比如app.ts或child.ts里已注入） -->
<router-view name="menu" router.bind="router"></router-view>
<router-view name="content" router.bind="router"></router-view>

<!-- 嵌套层级较深时，也可以用$parent向上查找父级router -->
<router-view name="menu" router.bind="$parent.router"></router-view>

这种方式能跳过子路由的上下文问题，直接把正确的Router实例传递给视口加载的组件，很多时候能快速解决“undefined”的问题。

4. 检查路由导航的方式是否规范 #

确保你是通过Aurelia的Router API来导航到子路由的，比如在根组件里用：

// 无参数导航
this.router.navigateToRoute('child-default');
// 带参数导航
this.router.navigateToRoute('child-default', { id: 123 });

不要直接手动修改URL或用原生window.location.href跳转，这种方式会破坏Aurelia的路由上下文，导致子组件拿不到Router实例。

5. 验证子路由模块是否正确注册 #

如果子路由是独立模块，要确保在根路由（app.ts）里正确配置了这个模块的路由：

// app.ts的路由配置
export class App {
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Aurelia App';
    config.map([
      { route: '', redirect: 'child' },
      {
        route: 'child',
        name: 'child',
        moduleId: 'modules/child/child', // 指向子路由模块的ViewModel
        nav: true,
        title: 'Child Module'
      }
    ]);
    this.router = router;
  }
}

模块未正确注册的话，子路由的Router上下文不会被初始化，组件自然拿不到实例。

内容的提问来源于stack exchange，提问作者jackie.ms