aurelia - Aurelia-在具有不同路由配置的应用程序根目录之间切换

更新

这个问题可能与亩问题有关吗？
https://github.com/aurelia/framework/issues/400



我有一个Aurelia应用程序，具有两个不同的根，一个用于用户的loggen，另一个用于匿名用户。

我在其他Aurelia应用程序中实现了应用程序根based on the approach in this answer的变更。当login模块是没有附加路由的“隔离”模块时，此方法非常有效，但是我现在很难使其工作。

index.js-匿名用户的根目录

import {inject, useView, Aurelia} from "aurelia-framework";
import AuthService from "./services/auth-service";

@useView("app.html")
@inject(AuthService)
export class Index {
    constructor(authService) {
        this.auth = authService;
    }

    configureRouter(config, router) {
        config.title = "Super Secret Project";
        config.options.pushState = true;
        config.map([
            { route: ["","home"], moduleId: "home", nav: true, title: "Beginscherm" },
            { route: "over", moduleId: "about", nav: true, title: "Over" },
            { route: "inloggen", moduleId: "account/login", nav: false, title: "Inloggen" }
        ]);

        this.router = router;
    }
}

ic-app.js-登录用户的根目录

import {useView, inject} from "aurelia-framework";
import {RequestStatusService} from "./services/request-status-service";
import AuthService from "./services/auth-service";

@useView("app.html")
@inject(RequestStatusService, AuthService)
export class App {
    constructor(requestStatusService, authService) {
        this.requestStatusService = requestStatusService;
        this.auth = authService; // we use it to bind it to the nav-bar-top
    }

    configureRouter(config, router) {
        config.title = "Super Secret Project";
        config.options.pushState = true;
        config.map([
            { route: ["", "selecteer-school"], moduleId: "ic/select-school", nav: false, title: "Selecteer School" },
            { route: "dashboard", moduleId: "ic/dashboard", nav: true, title: "Beginscherm" },
        ]);

        this.router = router;
    }
}

auth-service.js上的登录代码

logIn(userData, rememberMe = false) {
    this.requestStatusService.isRequesting = true;
    return this.http
        .fetch("/token", { method: "POST", body: userData })
        .then((response) => response.json())
        .then(response => {
            if (response.access_token) {
                this.setAccessToken(response.access_token, response.userName, rememberMe);
                this.app.setRoot("ic-app");
            }
        });
}

和...

注销auth-service.js中的代码

logOff() {
    AuthService.clearAccessToken();
    this.app.setRoot("index");
}

问题

设置不同的应用程序根目录可以按预期工作，问题是我希望新的应用程序根目录自动导航到新根目录的默认路由，它尝试加载调用setRoot(...)时的路由。

为了举例说明，


我在登录页面上。 current route: /inloggen
我单击登录按钮。 app.setRoot("ic-app") is called
新的根已加载；调用ic-app.js中的configureRouter，然后...
控制台错误：Route not found: /inloggen


新的根目录尝试保留在相同的/inloggen路由中，但是我希望它加载或导航到该应用程序根目录的默认路由。
注销时也会发生同样的情况。

更改根目录后，如何强制应用导航到默认路由？

最佳答案

我的工作很棒，我回答了更多有关如何在此stackoverflow线程中进行回答的信息：

Aurelia clear route history when switching to other app using setRoot

基本上做到以下几点

this.router.navigate('/', { replace: true, trigger: false });
this.router.reset();
this.router.deactivate();

this.aurelia.setRoot('app');