Меню приложения

Общие принципы

  1. Содержание допускается только на нижнем уровне меню

  2. Любая форма приложения должна быть приписана к какому-либо пункту меню. Например, есть табличная форма с перечнем счетов и форма счёта. Для вызова табличной формы обычно предусмотрен пункт меню, для вызова формы конкретного объекта — нет. Поэтому при открытии формы счёта любого элемента должен быть выделен пункт меню, соответствующий таблице.

  3. Выделенный пункт меню должен определяться декларативно — только через URL формы. Императивное изменение выделенного пункта меню не допускается.

Типовые исключения

  1. Объем сохраняемых параметров потенциально очень большой. Например, перечень строк, выделенных чек-боксами в табличном гриде.

Типовые элементы кода

Модель меню
data: () => ({
  links: [
    {
      text: 'Прохождение тестовых заданий',
      to: '/form/exam-attempts/create',
      extra: '/form/exam-attempts/data',
    },
    {
      text: 'Мультикейс',
      to: '/form/multicase/create',
      extra: '/form/multicase/data',
    },
    {
      text: 'Аудиторное тестирование',
      to: '/form/classroom-exam/create',
      extra: '/form/classroom-exam/data',
    },
    {
      text: 'Личная информация',
      to: '/form/user/data',
    },
Свойство, определяющее, какой элемент раскрыт
<v-list-group v-else :key="link.text" no-action
    :group="link.subLinks.reduce(function(a,b)
       {return a + '|(' + b.to + ')|(' + b.extra + ')'}, '(---)')">
Класс, определяющий выделнный элемент
<v-list-item
  v-for="sublink in link.subLinks"
  :to="sublink.to"
  :key="sublink.text"
  :class="(sublink.extra && $route.path.match(sublink.extra)) ?
    'v-list-item--active' : ''"
>