Question

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

当我尝试从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;
    }
}

帐户/视图/ 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();
    }
}

帐户/视图/ 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();
    }
}

帐户/视图/ 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);
                });
        }
    }
}

Answer 1

您无法路由到其他子路由器上的命名路由。我们正在讨论在未来的Aurelia版本中处理这类问题的方法。

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

     APP
      |
    ACCOUNTS
     /    \
  OVERVIEW CREATE

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

儿童路线之间的导航

1 个答案: