Router des pages dans le navigateur sans rechargement

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Exécutée avec jComponent 20

jComponent possède son propre routeur pour les applications monopages. ROUTE(url, fn) enregistre une route : les segments {name} sont passés à fn comme arguments, dans l'ordre. REDIRECT(url) change l'adresse avec la History API (sans chargement de page) et exécute la route correspondante. Les routes sont comparées segment par segment : une route et une URL doivent avoir le même nombre de segments, et * correspond à n'importe quelle valeur à sa position. NAV décrit l'emplacement courant : NAV.url est le chemin, NAV.query la query string analysée et NAV.params les arguments de la route. NAV.back() et NAV.forward() parcourent l'historique que tient jComponent.

Pour le serveur, cela reste une seule page : chaque URL sous votre application doit donc renvoyer le même HTML (un ROUTE('GET /*') qui rend la structure), sinon un rechargement sur /users/5/ donnerait un 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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu