子路线之间的导航答案

【问题标题】：Navigation between child routes子路线之间的导航
【发布时间】：2017-02-19 10:56:15
【问题描述】：

在子路线之间导航时，我不断收到未找到路线的错误。我尝试了几种解决方案，我总是在子配置后注入并且现在总是刷新。但是我仍然无法导航到特定路线。

当我尝试从 create.ts 导航到 account_view 时，它说路由名称不存在，当我在 create.ts 中列出 this.router 中的所有路由时，它只说 accounts_overview 和 accounts_create 而不是 accounts_overview 的子路由.

app.ts

import {inject} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {HttpClient} from "aurelia-fetch-client";
import {AureliaConfiguration} from "aurelia-configuration";
import {Container} from 'aurelia-dependency-injection';
import {AuthorizeStep} from 'app/authorize-step';

export class App {
    private router: Router;

    configureRouter(config: RouterConfiguration, router: Router): void {
        config.title = 'Optios partners';
        config.addAuthorizeStep(AuthorizeStep);
        config.map([
            { route: '', redirect: "login" },
            { route: '/accounts', name: 'accounts', moduleId: 'account/view/index', title: 'Accounts', settings: { roles: [ 'partner', 'admin' ] } }
        ]);
        this.router = router;
    }
}

accounts/view/index.ts

import {computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';

export class Index {
    router: Router;
    hasSearchFocus: boolean;
    search: string = '';

    configureRouter(config: RouterConfiguration, router: Router)
    {
        config.map([
            { route: '/overview', name: 'accounts_overview', moduleId: 'account/view/overview', nav: true },
            { route: '/create', name: 'accounts_create', moduleId: 'account/view/create', nav: true }
        ]);

        this.router = router;
        this.router.refreshNavigation();
    }
}

accounts/view/overview.ts

import {AccountRepository} from "../repository/account-repository";
import {inject, computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(AccountRepository, EventAggregator)
export class Overview {
    router: Router;
    eventAggregator: EventAggregator;
    accountRepository: AccountRepository;
    accounts: string[];
    previousLetter: string = 'Z';

    configureRouter(config: RouterConfiguration, router: Router)
    {
        config.map([
            { route: ['', '/blank'], name: 'account_blank', moduleId: 'account/view/blank', nav: true },
            { route: '/:id', name: 'account_view', moduleId: 'account/view/view', nav: true, href: '0' }
        ]);

        this.router = router;
        this.router.refreshNavigation();
    }
}

accounts/view/create.ts

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {computedFrom} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {AccountRepository} from "../repository/account-repository";

@inject(AccountRepository, Router)
export class Create
{
    router: Router;
    accountRepository: AccountRepository;
    name: string;
    isSubmitted: boolean = false;

    constructor(accountRepository: AccountRepository, router: Router)
    {
        this.accountRepository = accountRepository;
        this.router            = router;
    }

    create()
    {
        this.isSubmitted = true;
        if (this.isValid()) {
            this.accountRepository
                .create(this.name)
                .then(response => {
                    if (! response.ok) {
                        throw Error(response.statusText);
                    }

                    return response.json();
                })
                .then(response => {
                    console.log(this.router.routes);
                    this.router.navigateToRoute('account_view');

                    return response;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}

【问题讨论】：

为什么在路由定义中使用前导斜杠？没有它们，它们应该可以正常工作gist.run/?id=11b928907440e90ea6564ec18d4e0f76
是的，我不知道它刚刚发生。我无法解决我的问题，但我确实改变了我的工作方式并放弃了子路线，并将所有内容放在单独的“自定义”元素中。这导致我有时会重复布局的一小部分。
您不应该为此使用自定义元素，因为您将失去深度链接。

标签： typescript aurelia

【解决方案1】：

您不能路由到不同子路由器上的命名路由。我们正在讨论在 Aurelia 的未来版本中处理此类问题的方法。

话虽如此，我怀疑您是否能够以您尝试做的方式做您想做的事情。您有一个如下所示的子路由器结构：

     APP
      |
    ACCOUNTS
     /    \
  OVERVIEW CREATE

您正试图让CREATE 路由器路由到OVERVIEW 路由器中的路由，但它不知道该路由。 IMO，你有一个过度嵌套的路由器结构。我会将路由器结构扁平化一些，然后考虑使用EventAggregator 发布父路由器页面将订阅的事件并引发导航事件或其他东西。

【讨论】：