【发布时间】：2017-04-25 02:07:54
【问题描述】：
我有一个带有管理“部分”的 Aurelia 应用程序设置。在本地启动站点并转到“localhost:9000”将带我到“src/blog/blog.html”。这本质上是我的应用程序的入口页面，我在其中配置了一个路由器：
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>
Admin.ts：
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”。
点击管理页面的导航链接时，我可以很好地导航到这些路线，但是...
在加载帖子或用户路由后，如果我刷新页面（即 - 使用“au run --watch”运行本地站点），则站点页面无法加载。与已报告的类似问题不同，DevTools 不会显示“无法找到路线”或类似的内容。相反，控制台在尝试加载应用程序资源时显示 404 错误：
按照其他帖子中的建议，我尝试了一些重置路由器、设置 root 等，但无济于事......
关于我需要做些什么来防止这种失败的任何想法？
编辑：
我现在意识到发生了什么......但仍然不确定如何解决。当我的应用程序被构建和捆绑时，“src/”中的所有内容都被捆绑到“src/scripts”，并且应用程序从项目根目录“../src”的“index.html”运行（包括捆绑的脚本，以及我包含的任何其他文件）。
当我导航到我的子路由“../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/”部分？
【问题讨论】：
-
您好，您能否发布一下您如何链接或引用响应 404 的文件？
-
@janmvtrinidad 我编辑了这篇文章。希望对您有所帮助...？
标签： aurelia