Основы клиентской маршрутизации

Mithril — это лёгкий и высокопроизводительный JavaScript-фреймворк для создания одностраничных приложений (SPA). Одной из ключевых возможностей SPA является клиентская маршрутизация, позволяющая изменять отображаемое содержимое без перезагрузки страницы. В Mithril маршрутизация реализована через встроенный модуль m.route, обеспечивающий управление URL и состоянием приложения.

Настройка маршрутизатора

Для начала необходимо инициализировать маршрутизатор с помощью функции m.route. Она принимает три аргумента:

m.route(rootElement, defaultRoute, routes);
  • rootElement — DOM-элемент, в котором будут рендериться компоненты.
  • defaultRoute — путь, на который будет перенаправлен пользователь, если текущий URL не соответствует ни одному маршруту.
  • routes — объект, где ключи — пути, а значения — компоненты или объекты с компонентами и дополнительными параметрами.

Пример базовой конфигурации:

const Home = {
    view: () => m("h1", "Главная страница")
};

const About = {
    view: () => m("h1", "О сайте")
};

m.route(document.body, "/home", {
    "/home": Home,
    "/about": About
});

В этом примере при переходе на /home будет отображаться компонент Home, а на /about — компонент About.

Определение динамических маршрутов

Mithril поддерживает динамические сегменты маршрута, которые позволяют получать параметры из URL:

const User = {
    view: (vnode) => m("h1", `Пользователь ID: ${vnode.attrs.id}`)
};

m.route(document.body, "/user/1", {
    "/user/:id": User
});
  • :id — динамический сегмент, который доступен в vnode.attrs.id.
  • Любое изменение URL, соответствующее шаблону, автоматически обновляет компонент с актуальными данными.

Навигация между маршрутами

Для программного перехода между маршрутами используется функция m.route.set:

m.route.set("/about");
  • Можно передавать параметры динамического сегмента в виде объекта:
m.route.set("/user/:id", { id: 42 });
  • Переход с использованием ссылки в разметке выполняется через компонент m.route.Link или обычные теги <a> с атрибутом href:
m("a[href='/about']", { oncreate: m.route.link }, "Перейти на About");
  • Атрибут oncreate: m.route.link предотвращает стандартное поведение ссылки и позволяет Mithril управлять маршрутизацией без перезагрузки страницы.

Обработка 404 и маршрутов по умолчанию

Mithril позволяет задавать маршрут по умолчанию, который используется при несоответствии URL ни одному маршруту. Он задается вторым аргументом m.route:

m.route(document.body, "/home", {
    "/home": Home,
    "/about": About,
    "/:404...": {
        view: () => m("h1", "Страница не найдена")
    }
});
  • :404... — специальный сегмент, который ловит все несоответствия.
  • Можно использовать любые имена сегментов для обработки wildcard маршрутов.

Использование параметров и query string

Mithril поддерживает query-параметры, доступные через m.route.param:

const Search = {
    view: () => m("div", `Результат поиска: ${m.route.param("q")}`)
};

m.route(document.body, "/search?q=test", {
    "/search": Search
});
  • Для изменения query-параметров используется та же функция m.route.set:
m.route.set("/search", { q: "новый запрос" });
  • URL обновляется без перезагрузки страницы, а компонент получает актуальные параметры.

Контроль истории браузера

Mithril автоматически использует history.pushState для SPA-навигации. Возможна настройка режима маршрутизации:

m.route.prefix = "#"; // По умолчанию используется HTML5 history API
  • Префикс # позволяет использовать hash-based маршрутизацию.
  • HTML5 history API (по умолчанию) обеспечивает чистые URL без хэшей.

Асинхронная загрузка компонентов

Маршруты Mithril могут загружать компоненты асинхронно, что полезно для оптимизации SPA:

m.route(document.body, "/home", {
    "/home": () => import("./Home.js").then(module => module.default)
});
  • Поддерживаются промисы, возвращающие компонент.
  • Позволяет реализовать lazy-loading для крупных приложений.

Обработка переходов и хуки маршрутизации

Mithril предоставляет хуки жизненного цикла маршрутизации:

  • onmatch(vnode, params) — вызывается перед рендерингом компонента, может вернуть компонент или промис.
  • onunmatch(vnode) — вызывается при уходе с маршрута, позволяет очистить ресурсы.

Пример использования:

const Dashboard = {
    onmatch: (vnode, params) => {
        if (!params.user) return "/login"; // редирект если нет пользователя
        return Dashboard;
    },
    view: () => m("h1", "Панель пользователя")
};
  • Такой подход упрощает авторизацию и проверку доступа на уровне маршрутов.

Итоговое понимание

Маршрутизация в Mithril сочетает простоту конфигурации с гибкостью: динамические сегменты, query-параметры, асинхронные компоненты и хуки позволяют строить SPA любой сложности без лишнего кода. Использование m.route обеспечивает управление состоянием URL, предотвращая перезагрузку страницы и создавая плавный пользовательский опыт.

Оглавление