aurelia - 将命名路由与 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.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;
}

会计/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"> )，但以下命名路由的方法都不起作用:

(来自 app.html，级别 1 尝试访问级别 3)<a route-href="route: accounting-account-list">Account List</a>

(来自 app.html，级别 1 尝试访问级别 3)<a route-href="route: accounting-account-view; params.bind: {id: 2}">Account #2</a>

(来自accounting-home.js，2级试图访问3级)this.router.navigateToRoute('accounting-account-view', {id: 2});

(来自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.我也收到很多警告，例如 Warning: a promise was rejected with a non-error: [object Object] at _buildNavigationPlan在页面加载和每次导航时在控制台日志中。

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

附带问题:我需要 import {Router} from 'aurelia-router';在每个 View 模型中，有一些还是没有？我需要注入(inject)吗？

Answer 1

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

我的情况非常相似。我有一个注销的 View ，其中有一些路线； login , register , forgot-password和，page/:page_slug (这是用于呈现静态页面)。然后我有一个登录的仪表板 View ，其中包含大量路线。

免责声明:以下代码示例未经测试，应仅用作指南。我也使用 TypeScript 而不是普通的旧 Javascript。将以下内容转换为 Javascript(如果需要)应该相当简单。以下只是我使用的，可能有更好的方法来做到这一点。

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

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

这是每个页面上显示的菜单。子路由器的问题是路由不提前知道，它们是动态的(即使你定义了它们)。只有当您实例化 View 模型(即导航到它)时，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'},
];

然后我专门为这些公共(public)路由创建了一个名为 src/public-app.ts 的根文件。伴随着 src/public-app.html (这包含路由器 View ):

import PublicRoutes from './public-routes';

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

然后我对我的私有(private)仪表板路线重复相同的操作。替换 Public 的实例和 public与 Private和 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);
}