Encaminhar páginas no navegador sem recarregar

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Executada com jComponent 20

O jComponent tem o seu próprio router para aplicações de página única. ROUTE(url, fn) regista uma rota: os segmentos {name} são passados a fn como argumentos, por ordem. REDIRECT(url) altera o endereço com a History API (sem carregar a página) e executa a rota que corresponde. As rotas são comparadas segmento a segmento: uma rota e um URL têm de ter o mesmo número de segmentos, e * corresponde a qualquer valor na sua posição. NAV descreve a localização atual: NAV.url é o caminho, NAV.query a query string já interpretada e NAV.params os argumentos da rota. NAV.back() e NAV.forward() percorrem o histórico que o jComponent mantém.

Para o servidor isto continua a ser uma só página, por isso todos os URLs sob a sua aplicação têm de devolver o mesmo HTML (um ROUTE('GET /*') que renderize a estrutura), caso contrário recarregar em /users/5/ daria um 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>

Experimente no seu navegador

Edite o exemplo e execute-o. Corre numa moldura isolada do seu navegador; nada é enviado para o nosso servidor.

Código

Pré-visualização