Я создал новый пример приложения с помощью aurelia-cli. Странное поведение, которое заставило меня застрять, связано с маршрутизацией. Это мой основной маршрут.

{
   route: "projects",
   title: 'Project Section',
   name:'project-section',
   moduleId: './modules/projects/project-section',
   nav: true
}

И это мой файл раздела проекта

export class ProjectSection {
    configureRouter(config, router) {
    config.map([
        { route: '',    moduleId: './projects-list', nav: false, title: 'Projects List' },
        { route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
    ]);
    this.router = router;
    }
}

Теперь, когда я открываю ссылку типа http://myapp.com/projects, она работает нормально, и если я обновите страницу, она все еще работает.

Если я нажму на ссылку, чтобы открыть страницу сведений http://myapp.com/projects/9348, которая тоже работает отлично. Но при обновлении этой страницы сведений браузер отключается

GET http://localhost:9000/projects/scripts/vendor-bundle.js net::ERR_ABORTED

Сообщение об ошибке в консоли

Я что-то упускаю из виду? Есть ли параметр конфигурации, позволяющий обновлять страницы с маршрутами, подобными /: id?

Код находится здесь, на github aurelia-sample, и вы клонируете и запускаете по-прежнему

au run --watch

Спасибо за любую помощь

РЕДАКТИРОВАТЬ: это имеет какое-либо отношение к

config.options.pushState = true;

В конфиге приложения?

1
Waku-2 27 Фев 2018 в 12:56

3 ответа

Лучший ответ

Я не знаю, была ли ваша проблема решена. Но да, это связано с тем, что pushState установлен на true. Я сам сталкивался с этой проблемой раньше. Это как-то связано с тем, как Аурелия загружает JS для страницы. Я не смог ее решить (хотя, признаюсь, я смотрел только около 20 минут). Но из того, что я увидел, вам нужно настроить некоторые параметры, чтобы это работало.

Хорошо. Это поможет http://aurelia.io/docs/routing/configuration#options, Baiscally :

  • Добавьте <base href="http://localhost:9000"> в index.html, чтобы перенаправить загрузку контента с базового URL. Остальная часть конфигурации может быть такой, какой вы ее сохранили.
  • Также добавьте config.options.root = '/' в конфигурацию вашего роутера
2
YakovL 27 Фев 2018 в 16:33

Спасибо за все ответы. Я наконец решил проблему. Я до сих пор не уверен, что это правильный путь или нет, но вот хитрость, которая работает.

Получив подсказку от Rud156 и ответ на этот вопрос Как удалить # из URL в Aurelia Я только что добавил

<base href="/">

В файле index.html, и все работает как положено.

Для дальнейшего изучения проблемы я клонировал пример контактного приложения aurelia

1 - когда вы запускаете приложение, как оно есть после клонирования, все отлично работает.

2- если вы добавите

config.options.pushState = true;

В src / app.js дочерние маршруты перестанут работать.

3- Добавить

<base href="/">

В index.html и все начнет работать.

0
Waku-2 28 Фев 2018 в 11:07

Попробуйте добавить маршрут перенаправления в функцию ProjectSection configureRouter следующим образом (на вашем примере):

export class ProjectSection {
    configureRouter(config, router) {
        config.map([
            { route: '', redirect: 'list' }, // Redirects to the list route when no specific route in the project section is specified
            { route: 'list', moduleId: './projects-list', nav: false, title: 'Projects List' },
            { route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
        ]);
        this.router = router;
    }
}
0
Bryandh 27 Фев 2018 в 10:58