Question

我有一个带有管理员“部分”的Aurelia应用程序设置。在本地启动网站并转到“localhost：9000”将带我到“src / blog / blog.html”。这基本上是我的应用程序的入口页面，我有一个如此配置的Routeer：

Blog.ts：

import { AuthService, AuthenticateStep } from 'aurelia-authentication';
import { autoinject, computedFrom } from 'aurelia-framework';
import { Router, RouterConfiguration, NavigationInstruction } from 'aurelia-router';

@autoinject
export class Blog {

  configureRouter(config: RouterConfiguration, router: Router) {

    config.title = "My Site";
    config.options.pushState = true;
    config.options.root = '/';

    config.addPipelineStep('authorize', AuthenticateStep);

    config.map([
      { route: ['admin'], name: 'Admin', moduleId: '../admin/admin', auth: true },
      { route: ['login'], name: 'Login', moduleId: '../admin/login' },
      { route: ['', 'home'], name: 'Home', moduleId: './routes/index', nav: true }
    ]);
  }
}

正如您所看到的，我在Blog.html中捕获localhost：9000 /或/ home以转到“src / blog / routes / index.html”。还配置了其他路线，但不包括......

当我转到“localhost：9000 / admin”时，内置了额外的逻辑来确定用户是否经过身份验证。如果用户未被初始化，则会将其发送到登录页面，否则用户将按预期正确路由到“src / admin / admin.html”页面。这里有另一个设置，它将''路由到admin目录中的另一个index.html。

Admin.html：

<template>
    <div class="frow gutters justify-between">
        <div class="col-md-1-6 admin-nav">
            <div class="admin-nav-link" repeat.for="row of router.navigation">
                <a href.bind="row.href">${row.settings.label}</a>
            </div>
        </div>
        <div class="col-md-4-6">
            <router-view></router-view>
        </div>
        <div class="col-md-1-6">
            <button click.delegate="logout()">Logout</button>
        </div>
    </div>
</template>

管理员：

import { AuthService } from 'aurelia-authentication';
import { Aurelia, autoinject } from 'aurelia-framework';
import { AppRouter, Router, RouterConfiguration, NavigationInstruction } from 'aurelia-router';

@autoinject
export class Admin {

    constructor(private authService: AuthService, private router: Router) {
        // console.log(`Authenticated: ${this.authService.authenticated}`);
        // console.log(this.authService.getTokenPayload());
    }

    configureRouter(config: RouterConfiguration, router: Router) {

        config.title = "Admin";
        config.options.pushState = true;
        config.options.root = '/';

        config.map([
            { route: [''], name: 'Admin', moduleId: './index' },
            { route: 'posts', name: 'Posts', moduleId: './posts/posts', nav: true, settings: { label: "Posts"}},
            { route: 'users', name: 'Users', moduleId: './users/users', nav: true, settings: { label: "Users"}}
        ]);

        this.router = router;
    }

    logout() {
        return this.authService.logout();
    }

}

到目前为止一切顺利......

更多路线设置，“src / admin / posts / posts.html”和“... / users.html”。

点击管理页面上的导航链接，我可以很好地导航到这些路线，但是......

在加载任何Posts OR Users路由后，如果我刷新页面（即 - 使用'au run --watch'运行本地站点），则无法加载站点页面。与报告的类似问题不同，DevTools不显示“无法找到路线”或类似的东西。相反，控制台在尝试加载应用程序资源时显示404错误：

我已经尝试过一些重置路由器，设置root等，正如其他帖子所建议的那样，无济于事......

有什么想法，我需要做些什么来防止这种失败？

修改

我现在意识到发生了什么......但仍然不确定如何解决。当我的应用程序构建和捆绑时，“src /”的所有内容都捆绑到“src / scripts”，应用程序从项目根目录“../src”（包括捆绑脚本，以及我所包含的任何其他文件。

当我导航到我的子路线“../admin/posts”时，Aurelia似乎“重新启动”并尝试使用“src / admin”作为它的根目录。当然，这会失败，因为这个目录中没有任何应用程序脚本。

因此，当我尝试从“localhost：9000 / admin / posts”刷新页面时，在尝试加载时没有任何作用：

http://localhost:9000/admin/scripts/vendor-bundle.js

而应该加载

http://localhost:9000/scripts/vendor-bundle.js

任何人都知道这是为什么，以及我如何在刷新这些子路线时删除“/ admin /”部分？

Answer 1

如果您正在使用pushState，则应在index.html或起始文档中添加head标记base标记。有关更多配置，请参阅here。它看起来像这样

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <meta charset="utf-8">
    <title>Aurelia</title>
</head>

<body  aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

如何修复Aurelia路由器刷新子路由失败？

1 个答案: