Pfadverarbeitung

m.route und m.request verwenden beide ein Konzept, das als Pfad bezeichnet wird. Dieser Pfad wird verwendet, um die URL zu generieren, zu der Sie routen oder von der Sie Daten abrufen.

Pfadtypen

Es gibt zwei grundlegende Arten von Pfaden: rohe Pfade und parametrisierte Pfade.

• Rohe Pfade sind einfache Zeichenketten, die direkt als URLs verwendet werden. Es werden keine Ersetzungen oder Aufteilungen vorgenommen. Lediglich eine Normalisierung erfolgt, wobei alle Parameter an das Ende angehängt werden.
• Parametrisierte Pfade ermöglichen es Ihnen, Werte in Pfade einzufügen. Standardmäßig werden diese Werte aus Gründen der Bequemlichkeit und Sicherheit vor URL-Injection geschützt.

Für m.request können dies nahezu beliebige URLs sein, während für Routen nur absolute URL-Pfadnamen ohne Schema oder Domänen zulässig sind.

Pfadparameter

Pfadparameter sind relativ einfach. Sie treten in zwei Formen auf:

• :foo - Fügt params.foo in die URL ein und maskiert den Wert zuvor.
• :foo... - Fügt einen rohen, nicht maskierten params.foo-Pfad in die URL ein.

Das params-Objekt ist das params in entweder m.route.set(path, params) oder m.request({url, params}).

Wenn Sie Routen über m.route(root, defaultRoute, routes) definieren, können Sie diese Parameter verwenden, um Werte aus Routen zu extrahieren. Dies funktioniert im Wesentlichen wie das Generieren der Pfade, nur in umgekehrter Richtung.

// Editieren eines einzelnen Elements
m.route(document.body, '/edit/1', {
  '/edit/:id': {
    view: function () {
      return [m(Menu), m('h1', 'Benutzer bearbeiten ' + m.route.param('id'))];
    },
  },
});

// Editieren eines Elements, das durch einen Pfad identifiziert wird
m.route(document.body, '/edit/pictures/image.jpg', {
  '/edit/:file...': {
    view: function () {
      return [m(Menu), m('h1', 'Datei bearbeiten ' + m.route.param('file'))];
    },
  },
});

Im ersten Beispiel würde m.route.param("id") den Wert "1" liefern, und im zweiten Beispiel würde m.route.param("file") den Wert pictures/image.jpg liefern, vorausgesetzt, Sie navigieren jeweils zur entsprechenden Route.

Pfadparameter können durch /, - oder . getrennt werden. Dies ermöglicht dynamische Pfadsegmente und bietet mehr Flexibilität als nur ein einfacher Pfadname. Sie könnten beispielsweise Routen wie "/edit/:name.:ext" für die Bearbeitung basierend auf der Dateierweiterung oder /:lang-:region/view" für eine lokalisierte Route definieren.

Pfadparameter sind "gierig": Angenommen, Sie haben eine Route "/edit/:name.:ext" deklariert und navigieren zu /edit/file.test.png, dann sind die extrahierten Parameter {name: "file.test", ext: "png"} und nicht {name: "file", ext: "test.png"}. Ähnlich verhält es sich bei "/route/:path.../view/:child...": Wenn Sie zu /route/foo/view/bar/view/baz navigieren, sind die extrahierten Parameter {path: "foo/view/bar", child: "baz"}.

Parameter Normalisierung

Pfadparameter, die in Pfadnamen interpoliert werden, werden aus der Query-String entfernt, um die Übersichtlichkeit zu gewährleisten und den Pfadnamen lesbarer zu halten. Dies führt beispielsweise zu einer Serveranfrage vom Typ GET /api/user/1/connections?sort=name-asc, wobei das doppelte id=1 in der URL-Zeichenkette weggelassen wird.

m.request({
  url: 'https://example.com/api/user/:userID/connections',
  params: {
    userID: 1,
    sort: 'name-asc',
  },
});

Sie können Parameter auch explizit in der Query-String selbst angeben, wie in diesem Beispiel, das dem obigen entspricht:

m.request({
  url: 'https://example.com/api/user/:userID/connections?sort=name-asc',
  params: {
    userID: 1,
  },
});

Und natürlich können Sie beides kombinieren. Dies führt zu einer Anfrage an GET /api/user/1/connections?sort=name-asc&first=10.

m.request({
  url: 'https://example.com/api/user/:userID/connections?sort=name-asc',
  params: {
    userID: 1,
    first: 10,
  },
});

Dies gilt sogar für das Routen-Matching: Sie können eine Route mit expliziten Query-Strings abgleichen. Der übereinstimmende Parameter wird zur Vereinfachung gespeichert, sodass Sie weiterhin über VNode-Parameter oder über m.route.param darauf zugreifen können. Beachten Sie, dass dies zwar möglich ist, aber im Allgemeinen nicht empfohlen wird, da Sie Pfade für Seiten bevorzugen sollten. Es kann jedoch nützlich sein, wenn Sie nur für einen bestimmten Dateityp eine leicht abweichende Ansicht generieren müssen, es sich aber logisch immer noch um einen Query-ähnlichen Parameter und nicht um eine separate Seite handelt.

// Hinweis: Dies wird im Allgemeinen *nicht* empfohlen - Sie sollten Pfade für Routen-
// Deklarationen bevorzugen, nicht Query-Strings.
m.route(document.body, '/edit/1', {
  '/edit?type=image': {
    view: function () {
      return [m(Menu), m('h1', 'Foto bearbeiten')];
    },
  },
  '/edit': {
    view: function () {
      return [m(Menu), m('h1', 'Bearbeiten ' + m.route.param('type'))];
    },
  },
});

Query-Parameter werden implizit verwendet - Sie müssen sie nicht benennen, um sie zu akzeptieren. Sie können basierend auf einem vorhandenen Wert abgleichen, wie in "/edit?type=image", aber Sie müssen nicht "/edit?type=:type" verwenden, um den Wert zu akzeptieren. Tatsächlich würde Mithril.js dies so behandeln, als ob Sie versuchen würden, buchstäblich mit m.route.param("type") === ":type" übereinzustimmen, was Sie wahrscheinlich nicht möchten. Verwenden Sie kurz gesagt m.route.param("key") oder Routenkomponentenattribute, um Query-Parameter zu lesen.

Pfad Normalisierung

Geparste Pfade werden immer ohne doppelte Parameter und zusätzliche Schrägstriche zurückgegeben und beginnen immer mit einem Schrägstrich. Diese kleinen Unterschiede können oft hinderlich sein und das Routing und die Pfadverarbeitung unnötig komplizieren. Mithril.js normalisiert intern die Pfade für das Routing, stellt aber die aktuelle, normalisierte Route nicht direkt zur Verfügung. (Sie könnten sie über m.parsePathname(m.route.get()).path berechnen.)

Wenn Parameter während des Abgleichs dedupliziert werden, werden Parameter in der Query-String gegenüber Parametern im Pfadnamen bevorzugt, und Parameter am Ende der URL werden gegenüber Parametern näher am Anfang der URL bevorzugt.

Pfad-Escaping

Es gibt einige Zeichen, die Sie maskieren müssen, wenn Sie sie wörtlich verwenden möchten. Praktischerweise kodiert encodeURIComponent diese und mehr. Beim Ersetzen von Parametern und Hinzufügen von Query-Parametern werden diese bei Bedarf automatisch mit dieser Funktion kodiert. Hier sind die Zeichen, die Mithril.js interpretiert:

• : = %3A
• / = %2F (nur in Pfaden erforderlich)
• % = %25
• ? = %3F (nur in Pfaden erforderlich)
• # = %23

Natürlich gibt es noch andere Zeichen, die Sie gemäß der URL-Spezifikation maskieren müssen, wie z. B. Leerzeichen. Wie bereits erwähnt, erledigt encodeURIComponent dies für Sie, und Mithril.js verwendet dies implizit, wenn Sie Parameter ersetzen. Sie müssen sich also nur darum kümmern, wenn Sie Parameter explizit angeben, wie in m.request("https://example.com/api/user/User%20Name/:field", {params: {field: ...}}).