Параметризованные маршруты

Mithril предоставляет мощный и гибкий роутинг, который позволяет создавать одностраничные приложения (SPA) с динамическими маршрутами. Одной из ключевых возможностей является использование параметризованных маршрутов, позволяющих передавать данные через URL и использовать их внутри компонентов.

Определение параметризованных маршрутов

Параметризованный маршрут — это маршрут, содержащий плейсхолдеры для динамических значений. Синтаксис в Mithril выглядит следующим образом:

m.route(document.body, "/users", {
    "/users": UsersList,
    "/users/:id": UserDetail
});

В этом примере:

  • /users отображает список пользователей.
  • /users/:id отображает страницу конкретного пользователя, где :id — это динамический параметр.

Важно: имя параметра после двоеточия (:id) становится ключом в объекте m.route.param().

Получение параметров маршрута

Для доступа к значению параметра используется функция m.route.param():

const UserDetail = {
    view: function() {
        const userId = m.route.param("id");
        return m("div", `Страница пользователя с ID: ${userId}`);
    }
};

Здесь userId будет содержать значение, которое указано в URL. Например, при переходе на /users/42, m.route.param("id") вернёт строку "42".

Особенности работы:

  • Параметры всегда возвращаются в виде строк.
  • Можно передавать несколько параметров, используя несколько плейсхолдеров: /users/:id/:action.

Передача нескольких параметров

Мithril поддерживает маршруты с несколькими динамическими сегментами:

m.route(document.body, "/users", {
    "/users/:id/:tab": UserDetail
});

const UserDetail = {
    view: () => {
        const { id, tab } = m.route.param();
        return m("div", `Пользователь ${id}, вкладка ${tab}`);
    }
};

В этом случае m.route.param() возвращает объект с ключами, соответствующими именам параметров.

Использование параметров при переходах

Для программного изменения маршрута с передачей параметров используется функция m.route.set():

m.route.set("/users/42/details");

Или с объектом параметров:

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

Преимущества такого подхода:

  • Обеспечивает динамическую генерацию URL.
  • Сохраняет синхронизацию состояния приложения с адресной строкой браузера.
  • Позволяет легко создавать ссылки внутри приложения:
m("a", { href: m.route.get("/users/:id", { id: 42 }) }, "Профиль пользователя");

Параметры по умолчанию и необязательные сегменты

В Mithril нет встроенной поддержки необязательных сегментов в виде :id?, однако можно реализовать их через проверку внутри компонента:

const UserDetail = {
    view: () => {
        const id = m.route.param("id") || "не указан";
        return m("div", `Пользователь: ${id}`);
    }
};

Также удобно использовать параметры для фильтров, сортировки и пагинации, передавая их через query-параметры:

m.route.set("/users", { page: 2, sort: "name" });
const page = m.route.param("page"); // "2"
const sort = m.route.param("sort"); // "name"

Составные маршруты и вложенные компоненты

Параметризованные маршруты хорошо сочетаются с вложенной маршрутизацией:

m.route(document.body, "/users", {
    "/users": UsersList,
    "/users/:id": {
        render: function(vnode) {
            return m(Layout, m(UserDetail, vnode.attrs));
        }
    }
});
  • vnode.attrs содержит параметры маршрута (id).
  • Компонент Layout может использовать их для создания общей структуры страницы.

Практические рекомендации

  • Использовать чёткие и осмысленные имена параметров (id, slug, page), чтобы код был читаемым.
  • При работе с числовыми параметрами явно приводить к числу, так как m.route.param() возвращает строку.
  • Для сложных приложений комбинировать плейсхолдеры с query-параметрами для гибкого управления состоянием.

Параметризованные маршруты в Mithril предоставляют простой и мощный способ создания динамических страниц. Они позволяют связать URL с данными и компонентами, обеспечивая чистый и предсказуемый подход к маршрутизации в SPA.

Оглавление