Enruta páginas en el navegador sin recargar

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Ejecutada con jComponent 20

jComponent tiene su propio enrutador para aplicaciones de una sola página. ROUTE(url, fn) registra una ruta: los segmentos {name} se pasan a fn como argumentos, en orden. REDIRECT(url) cambia la dirección con la History API (sin cargar la página) y ejecuta la ruta que coincide. Las rutas se comparan segmento a segmento: una ruta y una URL deben tener el mismo número de segmentos, y * coincide con cualquier valor en su posición. NAV describe la ubicación actual: NAV.url es la ruta, NAV.query la query string ya interpretada y NAV.params los argumentos de la ruta. NAV.back() y NAV.forward() se mueven por el historial que mantiene jComponent.

Para el servidor esto sigue siendo una sola página, así que todas las URL bajo tu aplicación tienen que devolver el mismo HTML (un ROUTE('GET /*') que renderice el esqueleto); si no, recargar en /users/5/ daría 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>

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa