Программная навигация

Программная навигация в Mithril.js реализуется через встроенный объект m.route, который управляет состоянием маршрутизатора и позволяет изменять URL без полной перезагрузки страницы. В отличие от стандартных ссылок <a>, использование программной навигации обеспечивает динамическую подгрузку компонентов и поддерживает одностраничное приложение (SPA).

Основные методы m.route

  1. m.route.set(path, params, options) Позволяет программно изменить маршрут.

    • path — строка с новым URL или именем маршрута.
    • params — объект с параметрами маршрута (опционально).
    • options — объект с дополнительными настройками (например, replace: true, чтобы не добавлять запись в историю браузера).

    Пример:

    m.route.set("/users", { id: 42 });

  2. m.route.get() Возвращает текущий путь маршрута, включая параметры query.

    let currentPath = m.route.get();
console.log(currentPath); // "/users?id=42"

  3. m.route.param(key) Извлекает значение параметра маршрута по ключу.

    let userId = m.route.param("id"); // 42

Настройка маршрутов

Маршруты в Mithril настраиваются при инициализации приложения через m.route(document.body, defaultRoute, routes).

  • document.body — контейнер, куда будут рендериться компоненты.
  • defaultRoute — маршрут, используемый по умолчанию.
  • routes — объект, связывающий путь с компонентом.

Пример конфигурации маршрутов:

m.route(document.body, "/home", {
    "/home": HomeComponent,
    "/users/:id": UserComponent,
    "/settings": SettingsComponent
});

Параметры маршрута (:id) становятся доступны через m.route.param("id").

Навигация без перезагрузки страницы

Для динамической навигации в SPA важно использовать программные методы вместо обычных ссылок <a href="/path">. В противном случае браузер выполнит полную перезагрузку страницы. Вместо этого применяется:

m("button", {
    onclick: () => m.route.set("/settings")
}, "Перейти в настройки");

Этот подход позволяет сохранять состояние приложения и избегать лишних HTTP-запросов.

Работа с query-параметрами

Mithril поддерживает query-параметры через объект params в m.route.set():

m.route.set("/users", { id: 42, filter: "active" });

Для чтения query-параметров:

let filter = m.route.param("filter"); // "active"

Для удаления параметра достаточно передать undefined:

m.route.set("/users", { filter: undefined });

Программная навигация с опцией replace

По умолчанию m.route.set() добавляет новую запись в историю браузера. Для замены текущего маршрута используется опция replace:

m.route.set("/home", {}, { replace: true });

Это полезно для редиректов после авторизации или при изменении состояния без возможности возвращения назад.

Навигация внутри компонентов

Внутри компонентов можно комбинировать обработчики событий с m.route.set() для построения сложной логики:

const UserCard = {
    view: (vnode) =>
        m("div", [
            m("h3", vnode.attrs.name),
            m("button", {
                onclick: () => m.route.set("/users/" + vnode.attrs.id)
            }, "Подробнее")
        ])
};

Каждый компонент может иметь собственные обработчики навигации, что упрощает поддержку и масштабирование приложения.

Программная проверка маршрута

Иногда требуется проверить текущий маршрут для условного рендеринга:

if (m.route.get() === "/home") {
    // выполнить какие-то действия
}

Также можно комбинировать с query-параметрами для тонкой настройки логики:

if (m.route.param("id") === "42") {
    // особое поведение для пользователя с id=42
}

Поддержка истории браузера

Mithril автоматически работает с History API (pushState/replaceState) и hash-маршрутизацией. Можно выбрать стратегию при инициализации:

m.route.prefix = ""; // отключение хеша, использование "чистых" URL

Использование m.route.prefix позволяет интегрировать SPA с серверными маршрутами и SEO.

Практические советы

  • Для перехода между компонентами использовать m.route.set() вместо <a> для сохранения состояния SPA.
  • Всегда использовать replace: true при редиректах после операций авторизации или изменения параметров, чтобы не захламлять историю браузера.
  • Проверять существование параметров через m.route.param() перед использованием, чтобы избежать ошибок при динамических маршрутах.
  • Сохранять константы маршрутов в одном месте, чтобы облегчить рефакторинг и уменьшить количество «магических строк» в коде.

Программная навигация в Mithril.js обеспечивает гибкий и надежный способ управления состоянием приложения и URL без полной перезагрузки страницы, позволяя строить высокопроизводительные одностраничные приложения с чистой и поддерживаемой архитектурой.

Оглавление