Útvonalkezelés

Az m.route és az m.request is használja az útvonal fogalmát. Ez határozza meg azt az URL-t, ahová a navigáció történik, vagy ahonnan adatokat kérünk le.

Útvonaltípusok

Két fő útvonaltípus létezik: nyers útvonalak és paraméteres útvonalak.

• A nyers útvonalak egyszerű szöveges értékek, amelyeket közvetlenül URL-ként használunk. Semmilyen helyettesítés nem történik, és az útvonal sem kerül felosztásra. Egyszerűen normalizálásra kerül, és az összes paraméter a végére lesz hozzáfűzve.
• A paraméteres útvonalak lehetővé teszik értékek beillesztését az útvonalakba, amelyek alapértelmezés szerint kódoltak a kényelem és az URL-injekció elleni védelem érdekében.

Az m.request esetében ezek szinte bármilyen URL-ek lehetnek, de az útvonalak esetében ezek csak abszolút URL útvonalnevek lehetnek séma vagy domain nélkül.

Útvonalparaméterek

Az útvonalparaméterek használata egyszerű. Két formában léteznek:

• :foo - Ez egy params.foo értékét szúrja be az URL-be, először kódolva az értékét.
• :foo... - Ez egy nyers params.foo útvonalat szúr be az URL-be anélkül, hogy bármit is kódolna.

A params objektum a következő helyeken található: az m.route.set(path, params) vagy az m.request({url, params}) függvényekben.

Amikor útvonalakat definiál az m.route(root, defaultRoute, routes) segítségével, ezeket a paramétereket használhatja értékek kinyerésére az útvonalakból. A működésük hasonló az útvonalak generálásához, de fordított irányban.

// Egyetlen elem szerkesztése
m.route(document.body, '/edit/1', {
  '/edit/:id': {
    view: function () {
      return [m(Menu), m('h1', 'Felhasználó szerkesztése ' + m.route.param('id'))];
    },
  },
});

// Útvonal által azonosított elem szerkesztése
m.route(document.body, '/edit/pictures/image.jpg', {
  '/edit/:file...': {
    view: function () {
      return [m(Menu), m('h1', 'Fájl szerkesztése ' + m.route.param('file'))];
    },
  },
});

Az első példában, feltételezve, hogy az alapértelmezett útvonalra navigálunk, az m.route.param("id") értéke "1" lesz, míg a második példában az m.route.param("file") értéke pictures/image.jpg.

Az útvonalparamétereket /, - vagy . karakterek határolhatják. Ez lehetővé teszi dinamikus útvonalszegmensek használatát, ami sokkal nagyobb rugalmasságot biztosít, mint egy egyszerű útvonalnév. Például illeszthető a "/edit/:name.:ext" útvonal a fájlkiterjesztés alapján történő szerkesztéshez, vagy a "/:lang-:region/view" útvonal egy lokalizált útvonalhoz.

Az útvonalparaméterek illesztése során a leghosszabb lehetséges egyezést veszi figyelembe: egy deklarált "/edit/:name.:ext" útvonal esetén, ha a /edit/file.test.png címre navigál, a kinyert paraméterértékek {name: "file.test", ext: "png"} lesznek, nem pedig {name: "file", ext: "test.png"}. Hasonlóképpen, a "/route/:path.../view/:child..." esetén, ha a /route/foo/view/bar/view/baz címre navigál, a kinyert paraméterértékek {path: "foo/view/bar", child: "baz"} lesznek.

Paraméternormalizálás

Az útvonalnevekben lévő útvonalparaméterek a lekérdezési karakterláncból eltávolításra kerülnek, ezzel biztosítva az útvonalnév olvashatóságát és a kényelmes használatot. Például ez egy GET /api/user/1/connections?sort=name-asc szerver kérést küld, elkerülve a dupla id=1 paramétert az URL karakterláncban.

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

A paramétereket kifejezetten is megadhatja magában a lekérdezési karakterláncban, például ebben, ami egyenértékű a fentivel:

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

És természetesen a kettő kombinálható. Ez egy GET kérést küld a GET /api/user/1/connections?sort=name-asc&first=10 címre.

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

Ez még az útvonalillesztésre is kiterjed: illeszthető az útvonal kifejezetten lekérdezési karakterláncokkal. A kényelem érdekében megtartja az illesztett paramétereket, így továbbra is hozzáférhet hozzájuk a vnode paraméterei révén vagy az m.route.param segítségével. Fontos megjegyezni, hogy bár ez lehetséges, általánosan nem ajánlott, mivel az oldalakhoz az útvonalak használata javasolt. Ez akkor lehet hasznos, ha egy adott fájltípushoz eltérő nézetet kell generálni, de logikailag ez még mindig egy lekérdezés-szerű paraméter, nem pedig egy külön oldal.

// Megjegyzés: ez általában *nem* ajánlott - a route
// deklarációkhoz az útvonalakat kell előnyben részesítenie, nem a lekérdezési karakterláncokat.
m.route(document.body, '/edit/1', {
  '/edit?type=image': {
    view: function () {
      return [m(Menu), m('h1', 'Fotó szerkesztése')];
    },
  },
  '/edit': {
    view: function () {
      return [m(Menu), m('h1', 'Szerkesztés ' + m.route.param('type'))];
    },
  },
});

A lekérdezési paraméterek automatikusan felhasználásra kerülnek; nem szükséges elnevezni őket ahhoz, hogy elfogadásra kerüljenek. Illeszthet egy meglévő érték alapján, mint a "/edit?type=image"-ben, de nem kell a "/edit?type=:type"-t használnia az érték elfogadásához. A Mithril.js ebben az esetben úgy értelmezné, hogy az m.route.param("type") === ":type" feltételre próbálunk illeszteni, ami valószínűleg nem a kívánt viselkedés. Röviden, használja az m.route.param("key")-t vagy az útválasztó komponens attribútumait a lekérdezési paraméterek olvasásához.

Útvonalnormalizálás

Az elemzett útvonalak mindig úgy kerülnek visszaadásra, hogy az összes duplikált paraméter és extra perjel eltávolításra kerül, és mindig perjellel kezdődnek. Ezek a kis különbségek gyakran megnehezítik a dolgokat, és sokkal bonyolultabbá tehetik az útválasztást és az útvonalak kezelését a szükségesnél. A Mithril.js belsőleg normalizálja az útvonalakat az útválasztáshoz, de a jelenlegi, normalizált útvonal nem érhető el közvetlenül. (Kiszámíthatja az m.parsePathname(m.route.get()).path segítségével.)

Amikor a paraméterek deduplikálásra kerülnek az illesztés során, a lekérdezési karakterláncban lévő paraméterek előnyt élveznek az útvonalnévben lévő paraméterekkel szemben, és az URL vége felé lévő paraméterek előnyt élveznek az URL eleje felé lévő paraméterekkel szemben.

Útvonalkódolás

Vannak olyan karakterek, amelyeket, ha szó szerint szeretné használni őket, kódolni kell. Az encodeURIComponent függvény kényelmesen kódolja ezeket a karaktereket (és még sok másikat is), és amikor paramétereket helyettesítünk be vagy lekérdezési paramétereket adunk hozzá, ezek automatikusan kódolásra kerülnek ezzel a függvénnyel. Íme azok, amelyeket a Mithril.js értelmez:

• : = %3A
• / = %2F (csak az útvonalakban kötelező)
• % = %25
• ? = %3F (csak az útvonalakban kötelező)
• # = %23

Természetesen vannak mások is, amelyeket az URL specifikáció szerint kódolnia kell, például a szóközök. De amint már említettük, az encodeURIComponent ezt megteszi Önnek, és a Mithril.js ezt implicit módon használja, amikor paramétereket helyettesít be. Ez csak akkor releváns, ha explicit módon adunk meg paramétereket, például az m.request("https://example.com/api/user/User%20Name/:field", {params: {field: ...}}) példában.