Невозможно удалить предыдущий хэштег Aurelia routing

Я столкнулся с проблемой, что я не могу показаться, чтобы решить. Удалить предыдущий хэштег в маршрутах можно, выполнив действия, описанные в RouterConfiguration -> Options-> Push State.

Я выполнил все эти шаги, смотрите код ниже.

Приложение.параметры конфигурации TS Routercon 

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
            }
        }
    ]);
    ...

Индекс.html head 

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

Конфиг.js 

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

Мой маршрут входа по-прежнему работает только с использованием localhost:9000/#/login, тогда как localhost:9000/login не может быть найден. Я также пытался реализовать это в свежем приложении Aurelia JSPM skeleton безрезультатно...

Есть идеи, почему это происходит и что я могу делать неправильно?
2 5
jspm

2 ответа:

Для BrowserSync (как описано @Bryandh), вам нужно настроить его так, чтобы он всегда возвращался к вашему index.html. В зависимости от вашего проекта, у вас может быть некоторый файл задачи(например, задача Gulp serve, которая используется во всей 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. Не будет больше 404, когда вы получите направление на index.html, которое загрузит Aurelia и обработает маршрут /users.

1

Для моих представлений, которые динамически загружаются в контейнер router-view, с индексом в качестве корневого, я смог получить URL-адреса моего проекта, чтобы они выглядели следующим образом (что, я думаю, то, что вы просите):

  • http://localhost:2112/
  • http://localhost:2112/jobs
  • http://localhost:2112/discussion
Мне не нужно было изменять столько кода, сколько вы поделились, чтобы заставить это работать. Первое, что я сделал, это установил базовую ссылку в моем корневом html-файле. Для меня это было так. индекс.html .

<base href="/" />

Затем я устанавливаю состояние push в true внутри метода configureRouter() 

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