无法删除 Aurelia 路由的前置标签

Question

我运行遇到了一个似乎无法解决的问题。通过执行 RouterConfiguration -> Options-> Push State.

中提供的步骤，应该可以删除路由中前面的主题标签

我已经执行了所有这些步骤，请参阅下面的代码。

app.ts 路由器配置选项

public configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;
    config.options.root = '/';
    config.map([
        {
            route: 'login',
            name: 'login',
            moduleId: 'pages/auth/login',
            nav: false,
            title: 'Login',
            settings: {
                allow_anonymous: true
            }
        }
    ]);
    ...

index.html头

<head>
  <meta charset="utf-8">
  <base href="/">
  ...

config.js

System.config({
  baseURL: "/",
  ...

我的登录路径仍然只能使用 localhost:9000/#/login 而无法找到 localhost:9000/login。我也尝试在新的 Aurelia JSPM 骨架应用程序中实现它，但无济于事...

知道为什么会发生这种情况以及我可能做错了什么吗？

Answer 1

对于动态加载到路由器视图容器中的视图，以索引为根，我能够使我的项目的 URL 如下所示（我相信这就是您所要求的):

http://localhost:2112/
http://localhost:2112/jobs
http://localhost:2112/discussion

我不需要像您分享的那样修改那么多的代码来让它工作。我做的第一件事是在我的根 html 文件中建立一个基本引用。对我来说，这是 index.html.

<base href="/" />

然后，我在 configureRouter() 方法中将推送状态设置为 true

configureRouter(config, route) {
   ...
   config.options.pushState = true;
   ...
}

Answer 2

对于 BrowserSync（如@Bryandh 所述），您需要将其配置为始终回退到您的 index.html。根据您的项目，您可能有一些需要更改的任务文件（例如 Gulp 服务任务，它在整个 Aurelia 中使用）。

我以Aurelia的骨架导航项目为例。它有一个子目录 skeleton-esnext，它使用 Gulp 和 JSPM 来运行应用程序。文件build/tasks/serve.js中有一个serve任务，需要调整如下：

var historyFallback = require('connect-history-api-fallback');

gulp.task('serve', ['build'], function(done) {
  browserSync({
    online: false,
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: [function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
      }, historyFallback()]
    }
  }, done);
});

重要的部分是historyFallback()中间件。这是由 BrowserSync 自动提供的。如果您现在为您的应用提供此任务（gulp serve 或 gulp watch），您可以直接访问您的路线，例如http://localhost:9000/users。当您被定向到 index.html 时，将不再有 404，它引导 Aurelia 并处理路由 /users.

无法删除 Aurelia 路由的前置标签

Unable to remove Aurelia routing's preceding hashtag

aurelia

jspm