Pagina's in de browser routeren zonder opnieuw te laden

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Uitgevoerd met jComponent 20

jComponent heeft zijn eigen router voor single-page-applicaties. ROUTE(url, fn) registreert een route: {name}-segmenten worden in volgorde als argumenten aan fn doorgegeven. REDIRECT(url) wijzigt het adres met de History API (zonder pagina te laden) en voert de passende route uit. Routes worden segment voor segment vergeleken: een route en een URL moeten evenveel segmenten hebben, en * komt op zijn plaats met elke waarde overeen. NAV beschrijft de huidige locatie: NAV.url is het pad, NAV.query de geparste query string en NAV.params de argumenten van de route. NAV.back() en NAV.forward() bewegen door de geschiedenis die jComponent bijhoudt.

Voor de server blijft het één pagina, dus elke URL onder je applicatie moet dezelfde HTML teruggeven (een ROUTE('GET /*') die het skelet rendert), anders zou herladen op /users/5/ een 404 geven.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld