Jednostránkové směrování aplikací pomocí hash nebo URL

Jednou z nejčastějších otázek týkajících se kódu během front-endového rozhovoru je „Můžete vytvořit jednostránkovou aplikaci s trasami bez rámce?“ V tomto tutoriálu vám ukážu, jak vytvořit vlastní systém směrování pro vaši jednostránkovou aplikaci pomocí metody hash nebo URL...bez rámce.

Tento tutoriál vám ukáže, jak vytvořit jednostránkovou aplikaci pomocí vanilkového JavaScriptu. Ukážu vám, jak implementovat směrování na straně klienta oběma způsoby (hash nebo URL) ve snadno použitelném formátu, který lze replikovat pro jakýkoli projekt.

Zobrazit toto na YouTube

Struktura složek

Používáme základní HTML strukturu. Soubory si můžete nastavit, jak chcete, ale pro účely tohoto tutoriálu můžete replikovat to, co mám níže.

index.html
/templates
   404.html
   index.html
   about.html
   contact.html
/js/
   router.js

Pojďme vytvořit naše HTML

Vytvoříme základní HTML dokument, který bude sloužit jako hlavní stránka. Na této stránce budeme mít navigační sekci a obsahovou sekci. Můžete to sestavit, jak chcete, ale poznamenejte si <nav></nav> značky se používají pro směrování URL, takže pokud používáte metodu URL, musí být v těchto značkách přítomna vaše navigace.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
   </head>
   <body>
      <nav>
      </nav>
      <div id="content"></div>
   </body>
</html>

Vytvoření souboru JS

Před </body> uzavírací značku, musíte tento odkaz přidat do souboru JS, který jste vytvořili výše.

<script src="/js/router.js"></script>

Možnost 1:Směrování URL

Nejprve si projdeme, jak to provést pomocí směrování URL . To znamená, že vaše odkazy budou vypadat jako /about . Toto je typický vzhled adresy URL. metoda hash používá # rozdělit stránky. Půjdu na to ještě níže.

Případ použití:Webové stránky

Tato možnost je lepší pro SEO a je uživatelsky přívětivější.

POZNÁMKA: Použití této metody má určité nevýhody. Musíte nakonfigurovat webový server, aby obsluhoval index.html pro SPA Route Paths. Můžete to udělat na úrovni serveru, ale pokud používáte něco jako VS Code LIVE SERVER, nemůžete. To znamená, že pokud přejdete přímo do /about, server nevykreslí soubor, protože nejprve potřebuje načíst skripty index.html. K tomu můžete upravit svůj soubor .htaccess.

Přidejte navigaci HTML

Mezi <nav></nav> přidejte následující značky v souboru index.html.

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Přidejte navigační odkazy v HTML

Nyní začněme s JS. Nejprve chceme vytvořit jakýkoli odkaz v <nav></nav> značky používají naše směrování.

// create document click that watches the nav links only
document.addEventListener("click", (e) => {
    const { target } = e;
    if (!target.matches("nav a")) {
        return;
    }
    e.preventDefault();
    route();
});

Vytvořte trasy

Každá trasa bude mít přidružené pole objektů. To skriptu sdělí, co je odkaz na adresu URL a také, jaká šablona, ​​název a popis se mají použít.

const routes = {
    404: {
        template: "/templates/404.html",
        title: "404",
        description: "Page not found",
    },
    "/": {
        template: "/templates/index.html",
        title: "Home",
        description: "This is the home page",
    },
    "/about": {
        template: "/templates/about.html",
        title: "About Us",
        description: "This is the about page",
    },
    "/contact": {
        template: "/templates/contact.html",
        title: "Contact Us",
        description: "This is the contact page",
    },
};

Vytvořte funkci, která sleduje adresu URL a volá urlLocationHandler

const route = (event) => {
    event = event || window.event; // get window.event if event argument not provided
    event.preventDefault();
    // window.history.pushState(state, unused, target link);
    window.history.pushState({}, "", event.target.href);
    locationHandler();
};

Vytvořte funkci, která zpracovává umístění URL

const locationHandler = async () => {
    const location = window.location.pathname; // get the url path
    // if the path length is 0, set it to primary page route
    if (location.length == 0) {
        location = "/";
    }
    // get the route object from the urlRoutes object
    const route = routes[location] || routes["404"];
    // get the html from the template
    const html = await fetch(route.template).then((response) => response.text());
    // set the content of the content div to the html
    document.getElementById("content").innerHTML = html;
    // set the title of the document to the title of the route
    document.title = route.title;
    // set the description of the document to the description of the route
    document
        .querySelector('meta[name="description"]')
        .setAttribute("content", route.description);
};

Dokončení skriptu

Nakonec musíme funkci zavolat při prvním načtení stránky, jinak domovská stránka nebude fungovat, pokud na ni nekliknete. Potřebujeme také přidat hlídač změn URL, aby skript věděl, kdy má zobrazit nový obsah.

// add an event listener to the window that watches for url changes
window.onpopstate = locationHandler;
// call the urlLocationHandler function to handle the initial url
window.route = route;
// call the urlLocationHandler function to handle the initial url
locationHandler();

Druhá možnost:Směrování hash

Pokud používáte metodu hash, nahraďte prosím obsah souboru router.js následujícím kódem.

Nyní k druhé možnosti. Směrování hash je častější, pokud používáte framework, ale pokud jej vytváříte od nuly, může se stát, že se kvůli negativním výhodám SEO budete vyhýbat. To znamená, že vaše odkazy budou vypadat jako #about namísto typické metody URL výše. Pro některé nemusí být tento typ adresy URL optimální, protože je příliš odlišný od toho, na co jsou vaši uživatelé zvyklí. Jinak je kód velmi podobný metodě URL...dokonce kratší.

Případ použití:aplikace, vstupní stránky

POZNÁMKA: Použití této metody má určité nevýhody. sing hash nemusí být nejlepší cestou pro SEO a také to může být pro některé uživatele neobvyklé, což je může přimět web nepoužívat.

Přidejte navigaci HTML

Mezi <nav></nav> přidejte následující značky v souboru index.html.

<a href="/">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

Vytvořte trasy

Hashovací trasy vypadají velmi podobně jako výše uvedené trasy URL. Tuto část skriptu můžete znovu použít. Rozdíl je především v tom, jak je definován klíč propojení trasy.

const routes = {
    404: {
        template: "/templates/404.html",
        title: "404",
        description: "Page not found",
    },
    "/": {
        template: "/templates/index.html",
        title: "Home",
        description: "This is the home page",
    },
    about: {
        template: "/templates/about.html",
        title: "About Us",
        description: "This is the about page",
    },
    contact: {
        template: "/templates/contact.html",
        title: "Contact Us",
        description: "This is the contact page",
    },
};

Vytvořte funkci, která zpracovává umístění URL

const locationHandler = async () => {
    // get the url path, replace hash with empty string
    var location = window.location.hash.replace("#", "");
    // if the path length is 0, set it to primary page route
    if (location.length == 0) {
        location = "/";
    }
    // get the route object from the routes object
    const route = routes[location] || routes["404"];
    // get the html from the template
    const html = await fetch(route.template).then((response) => response.text());
    // set the content of the content div to the html
    document.getElementById("content").innerHTML = html;
    // set the title of the document to the title of the route
    document.title = route.title;
    // set the description of the document to the description of the route
    document
        .querySelector('meta[name="description"]')
        .setAttribute("content", route.description);
};

Dokončení skriptu

Opět musíme funkci zavolat při prvním načtení stránky, jinak domovská stránka nebude fungovat, pokud na ni nekliknete. Potřebujeme také přidat pozorovatele pro změny hash, aby skript věděl, kdy má zobrazit nový obsah.

// create a function that watches the hash and calls the urlLocationHandler
window.addEventListener("hashchange", locationHandler);
// call the urlLocationHandler to load the page
locationHandler();

Závěr

Takže i když existuje mnoho způsobů, jak toho dosáhnout, toto jsou 2, které potřebujete vědět, abyste se stali lepším vývojářem frontendu. Jakmile to budete vědět, můžete přejít na frameworky React nebo Vue. Takže doufejme, že vám tyto jednoduché, ale zásadní metody učení pomohly překonat obávanou otázku na pohovoru na začátku článku. hodně štěstí!