Seiten im Browser ohne Neuladen routen

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Mit jComponent 20 ausgeführt

jComponent hat einen eigenen Router für Single-Page-Anwendungen. ROUTE(url, fn) registriert eine Route: {name}-Segmente werden der Reihe nach als Argumente an fn übergeben. REDIRECT(url) ändert die Adresse mit der History API (ohne Seitenladen) und führt die passende Route aus. Routen werden Segment für Segment verglichen: Eine Route und eine URL müssen dieselbe Anzahl an Segmenten haben, und * passt an seiner Position auf jeden Wert. NAV beschreibt den aktuellen Ort: NAV.url ist der Pfad, NAV.query der geparste Query-String und NAV.params die Argumente der Route. NAV.back() und NAV.forward() bewegen sich durch den Verlauf, den jComponent führt.

Für den Server ist das weiterhin eine einzige Seite, daher muss jede URL unterhalb deiner Anwendung dasselbe HTML liefern (ein ROUTE('GET /*'), das das Grundgerüst rendert), sonst ergäbe ein Neuladen auf /users/5/ ein 404.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>

	<h1 id="title"></h1>

	<script>

		ROUTE('/', function() {
			$('#title').text('Home');
		});

		ROUTE('/users/{id}/', function(id) {
			$('#title').text('User ' + id);
		});

		ROUTE('/files/*', function() {
			$('#title').text('Files');
		});

	</script>

</body>
</html>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau