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

Question

更新

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

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

我在其他 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

新的根被加载； configureRouter在 ic-app.js 中被调用，然后...

控制台错误:Route not found: /inloggen

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

更改 root 后如何强制应用导航到默认路由？

Answer 1

我做得很好，我回答了更多关于如何在这个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');