Какая правильная конфигурация маршрутизатора aurelia для маршрутов # / items / AND # / items /: id / summary? - PullRequest
Новая
       15

Какая правильная конфигурация маршрутизатора aurelia для маршрутов # / items / AND # / items /: id / summary?

0 голосов
/ 24 апреля 2018

Я пытаюсь заставить родительский / дочерний маршрутизатор работать для этой базовой иерархии: 

#/items             (show options to select a specific item)
#/items/:id/summary (specific item summary)
#/items/:id/detail  (specific item detail)

Target UI

Detail

У меня есть следующие маршруты, определенные в родительском маршрутизаторе: 

[{
  route: '', redirect: 'items'
}, {
  route: ['items'],
  name: 'Items',
  viewPorts: {
    itemNavigation: {moduleId: '....'},
    currentItem: { moduleId: '......' }
  },
  nav: true,
  title: 'Items'
},
{
  route: ['items/:id'],
  viewPorts: {
    itemNavigation: {moduleId: '......'},
    currentItem: { moduleId: '......' }
  },
  nav: false
}...

У меня есть следующие маршруты, определенные в дочернем маршрутизаторе модуля 'currentItem': 

[{
    route: '',
    moduleId: '....',
    name: 'noRouteSelected',
    nav: false
  },  {
    route: 'summary',
    moduleId: '....',
    name: 'summary',
    nav: true,
    title: 'Summary'
  }, {
    route: 'detail',
    moduleId: '....',
    name: 'detail',
    nav: true,
    title: 'Detail'
  }...

Это выглядит нормально, но если я перейду к дочернему маршруту (например, «# / items / 123 / summary»), поскольку nav имеет значение false, в главном меню навигации ничего не отображается как «активный» (красный кружок в образ). Это достаточно справедливо, но если я объединю 2 родительских конфига в следующем виде:

route: ['items', 'items/:id']

Я получаю множество исключений:

Error: A value is required for route parameter 'id' in route 'investments'.

Если я использую необязательный конфиг:

route: ['items/:id?']

тогда мне нужно указать параметр href в конфиге, но я понятия не имею, что это должно быть в этом сценарии. Должен ли я вместо этого использовать навигационную стратегию? (примеры были бы великолепны!)

Может кто-нибудь помочь? На этом фронте не хватает документации.

1 Ответ

0 голосов
/ 24 апреля 2018

Вот как я бы структурировал ваше приложение:

На странице верхнего уровня: 

{
    route: '',
    redirect: 'items'
},
{
    route: 'items',
    name: 'items',
    moduleId: './items',
    title: 'Items',
    nav: true
}

На странице товаров: 

{
    route: '',
    name: 'no-item-selected',
    moduleId: './some-empty-view',
    nav: false
},
{
    route: ':id',
    name: 'item',
    moduleId: './item',
    nav: false
}

В статьеpage: 

{
    route: '',
    redirect: 'summary'
},
{
    route: 'summary',
    moduleId: './item-summary',
    name: 'item-summary',
    title: 'Summary',
    nav: true
},
{
    route: 'detail',
    moduleId: './item-detail',
    name: 'item-detail',
    title: 'Detail',
    nav: true
}

В самой модели представления элементов вы можете сохранить Router, полученный при configureRouter, а затем при activate() установить заголовок соответственно, если хотите, так как "Items |Item | Detail ", вероятно, немного глупо (поэтому я оставил заголовок для страницы Item)

Вы также можете полностью опустить вложенный дочерний маршрутизатор на странице item и просто иметь и summary, и detail там, показывая / скрывая их согласно некоторой другой логике.Хотя было бы неплохо иметь возможности навигации назад / вперед и иметь возможность напрямую ссылаться на что-то.

Оригинальный ответ (это касалось того, что оказалось опечаткой, но яоставлю это для контекста)

Измените свой маршрут с items:id на items/:id.По сути, каждый «сегмент» маршрута (будь то статический, необязательный, динамический) должен быть разделен косой чертой, или средство распознавания маршрута не отображает их правильно.

Вам не нужно создавать маршрутопционально с такой настройкой.В любом случае вы не будете выбирать элемент без идентификатора (и если вы создадите новый, вы просто передадите new или что-то похожее в качестве идентификатора, чтобы ваш взгляд мог различаться)

...