cs en cs cs id cs cs de fr cs cs en cs cs en en en en cs cs cs en en it cs en cs en cs en en cs en en cs cs en cs cs cs es cs cs cs cs it cs cs en cs cs en en en sv en hbs_lat cs en cs cs cs cs cs cs eu cs cs cs cs cs cs cs cs cs cs cs nl cs cs cs cs cs pl cs cs cs cs nl en pl cs cs cs cs cs cs cs cs pl cs cs cs cs cs cs cs pl cs cs cs cs cs cs cs nl cs pl cs cs cs cs cs cs cs nl pl cs cs cs nl pl cs cs cs nl cs cs en cs en en en
Javascriptový framework Svelte.js nemá vlastní oficiální router. Nabízí sice aplikační framework Sapper, ale ten použít nechci. Zkusím tedy porovnat dostupné routery pro Svelte. Jako kritérium pro zařazení do seznamu jsem dal sto hvězd v GitHubu.
GitHub 786 hvězd, 692 Used by, poslední změna kódu před měsícem.
Svelte ve FAQ doporučuje pro deklarativní HTML přístup.
// server.js const { createServer } = require("http"); const app = require("./dist/App.js"); createServer((req, res) => { const { html } = app.render({ url: req.url }); res.write(`    ${html}     `); res.end(); }).listen(3000);
GitHub 337 hvězd, 325 Used by, poslední změna kódu před dvaceti dny.
Směřování založené na hašování, které je vhodné pro SPA aplikace, tedy nepotřebuje podporu na serveru. Pro moji aplikaci není ideální, protože předává znak „#“, který potřebuji v aplikaci použít pro jiné účely. Toto lze ale vyřešit tím, že Namísto toho, abyste museli psát #před každým odkazem, můžete také použít use:link.
Svelte ve FAQ doporučuje pro hash-based routing na klientské straně.
// Příklad definice routování import Home from './routes/Home.svelte' import Author from './routes/Author.svelte' import Book from './routes/Book.svelte' import NotFound from './routes/NotFound.svelte' const routes = { // Exact path '/': Home, // Using named parameters, with last being optional '/author/:first/:last?': Author, // Wildcard parameter '/book/*': Book, // Catch-all // This is optional, //but if present it must be the last '*': NotFound, } // Navigace mezi stránkami  Thus Spoke Zarathustra
GitHub 226 hvězd, 109 Used by, poslední změna před osmi měsíci. Vývoj zastaven autorem!
GitHub 276 hvězd, poslední změna kódu před třemi lety.
GitHub 166 hvězd, 59 Used by, poslední změna kódu před osmi dny. Navržen především pro SPA. Podporuje lokalizaci.
// Příklad routes.js import Login from './views/public/login.svelte' import PublicIndex from './views/public/index.svelte' import PublicLayout from './views/public/layout.svelte' import AdminLayout from './views/admin/layout.svelte' import AdminIndex from './views/admin/index.svelte' import EmployeesIndex from './views/admin/employees/index.svelte' function userIsAdmin() { //check if user is admin and returns true or false } const routes = [ { name: '/', component: PublicLayout }, { name: 'login', component: Login, layout: PublicLayout }, { name: 'admin', component: AdminLayout, onlyIf: { guard: userIsAdmin, redirect: '/login' }, nestedRoutes: [ { name: 'index', component: AdminIndex }, { name: 'employees', component: '', nestedRoutes: [ { name: 'index', component: EmployeesIndex }, { name: 'show/:id', component: EmployeesShow } ] } ] } ] // Import routování pravděpodobně do App.svelte   import { Router } from 'svelte-router-spa' import { routes } from './routes'     export { routes }
GitHub 268 hvězd, poslední změna kódu před dvěma měsíci. SPA router pro všechny frameworky (nejen Svelte) s Express syntaxí.
import React from 'react' import crayon from 'crayon' import react from 'crayon-react' const app = crayon.create() app.use(react.router()) app.path('/', ctx => { return ctx.mount(() =>  Hello World ) }) app.path('/users/:id', ctx => { return ctx.mount(() =>  Hi { ctx.params.id }! ) }) app.path('/**', ctx => { return ctx.mount(() =>  Not Found! ) }) app.load() // Použití navigace ve Svelte import svelte from 'crayon-svelte' app.use(svelte.router())
GitHub 238 hvězd, 75 Used by, poslední změna kódu před dvanácti dny. Automatizované cesty strukturou souborů. (Lze relativní cesty, absolutní cesty, pojmenované cesty a parametrizované cesty). Trasy jsou automatizované strukturou souborů.
Svelte ve FAQ doporučuje pro routování dle souborového systému.
// App.svelte   import { Router } from "@sveltech/routify"; import { routes } from "@sveltech/routify/tmp/routes";     // main.js import HMR from '@sveltech/routify/hmr' import App from './App.svelte'; const app = HMR(App, { target: document.body }, 'routify-app') export default app;
// ověřování přístupu     import { authenticate } from 'my-auth-service'     {#await authenticate()}   Verifying user...   {:then user}   {/await}