将命名路由与 Aurelia 子路由器一起使用

Question

我有 3 层嵌套路由器，定义如下：

app.js

configureRouter(config, router) {
  this.router = router;
  config.title = 'EagleWeb';
  var step = new AuthorizeStep(this.core);
  config.addAuthorizeStep(step);
  config.map([
    { route: '', redirect: 'home' },
    { route: 'home',              name: 'home',               moduleId: 'home/home' },
    { route: 'users',             name: 'users',              moduleId: 'users/user-home' },
    { route: 'accounting',        name: 'accounting',         moduleId: 'accounting/accounting' }
  ]);
}

accounting/accounting.js

configureRouter(config, router) {
  config.map([
    { route: '', redirect: 'home' },
    { route: 'home',      name: 'accounting-home',              moduleId: 'accounting/accounting-home' },
    { route: 'accounts',  name: 'accounting-accounts',          moduleId: 'accounting/accounts/accounts' },
    { route: 'entries',   name: 'accounting-entries',           moduleId: 'accounting/entries/entries' }
  ]);
  this.router = router;
}

accounting/accounts/accounts.js

configureRouter(config, router) {
  config.map([
    { route: '',          redirect: 'list' },
    { route: 'list',      name: 'accounting-account-list',              moduleId: 'accounting/accounts/account-list' },
    { route: 'view/:id',  name: 'accounting-account-view',              moduleId: 'accounting/accounts/account-view' }
  ]);
  this.router = router;
}

我想导航到第三级，它可以使用普通链接标签或直接输入 URL（例如<a href="#/accounting/accounts/view/2">），但以下命名路由的方法都不起作用：

1. （来自 app.html，级别 1 尝试访问级别 3）<a route-href="route: accounting-account-list">Account List</a>
2. （来自 app.html，级别 1 尝试访问级别 3）<a route-href="route: accounting-account-view; params.bind: {id: 2}">Account #2</a>
3. （来自accounting-home.js，2级试图访问3级）this.router.navigateToRoute('accounting-account-view', {id: 2});
4. （来自accounting-home.js，2级试图访问3级）this.router.navigateToRoute('accounting/accounting-accounts/accounting-account-view', {id: 2});

对于 #1-2，当应用加载时，我会收到类似 Error: A route with name 'accounting-account-list' could not be found. Check that name: 'accounting-account-list' was specified in the route's config. 的控制台日志错误，并且链接已失效。

对于 #3-4，当页面加载和每次导航时，我都会收到类似 Uncaught Error: A route with name 'accounting-account-view' could not be found. 的控制台日志错误。

我做错了什么？我需要做一些特殊的事情来访问不同路由器级别的路由吗？

附带问题：我需要在每个视图模型中使用import {Router} from 'aurelia-router';，一些，还是不需要？需要注射吗？

Answer 1

大约一周前，我在一个客户项目中遇到了同样的情况。真的，这里唯一的选择是预先创建所有路线，然后导入它们。如果您有单独的部分，您可以通过setRoot 使用切换根来缓解这种情况（我将进一步解释）。

我的情况非常相似。我有一个注销的视图，其中有一些路线； login、register、forgot-password 和 page/:page_slug（用于渲染静态页面）。然后我有一个登录的仪表板视图，其中包含大量路线。

免责声明：以下代码示例未经测试，仅供参考。我也使用 TypeScript 而不是普通的旧 Javascript。将以下内容转换为 Javascript（如果需要）应该相当简单。以下只是我使用的，可能有更好的方法。

我登录的仪表板视图有很多部分需要放入类似于以下内容的分层下拉菜单中：

Users
    Add
    List
    Manage
Experiments
    Add
    List
    Manage
Activities
    Add
    List
    Manage
Ingredients
    Add
    List
    Manage
Account
    Profile
    Notifications
    Billing
    Settings

这是每个页面上显示的菜单。子路由器的问题是路由不提前知道，它们是动态的（即使你定义了它们）。只有当您实例化视图模型（即导航到它）时，Aurelia 才会知道路线。

我最终选择的解决方案并不理想，但有所帮助。

我将所有非身份验证/面向公众的路由分解为一个文件，名为：src/public-routes.ts

export default [
    {route: 'login', name: 'login', moduleId: './public/login'},
    {route: 'register', name: 'register', moduleId: './public/register'},
    {route: 'forgot-password', name: 'forgot', moduleId: './public/forgot-password'},
    {route: 'pages/:page_slug', name: 'page', moduleId: './public/page'},
];

然后我专门为这些公共路由创建一个名为src/public-app.ts 的根文件，并附带src/public-app.html（其中包含路由器视图）：

import PublicRoutes from './public-routes';

export class PublicApp {
    configureRouter(config: RouterConfiguration, router: Router) {
        config.map(PublicRoutes);
    }
}

然后我对我的私人仪表板路线重复相同的操作。将Public 和public 的实例分别替换为Private 和private。使用扁平路由方法的一个重要提示是，如果您有很多路由，请不要将所有路由集中到一个文件中。

我最终为我的私人路线做的是为每个部分创建一个路线文件。所以我的用户路由有自己的文件user.routes.ts，我的帐户路由有自己的文件account.routes.ts等等。然后我将它们导入到我的主文件中（在本例中为 private-routes.ts）。

然后在我的src/main.ts 文件中，我根据用户是否登录来切换根：

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  let auth = aurelia.container.get(Auth);
  let root = auth.isLoggedIn ? './private-app' : './public-app';

  await aurelia.start();
  aurelia.setRoot(root);
}