Směrování stránek v prohlížeči bez opětovného načtení

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Spuštěno s jComponent 20

jComponent má vlastní router pro jednostránkové aplikace. ROUTE(url, fn) zaregistruje trasu: segmenty {name} se předají do fn jako argumenty v pořadí. REDIRECT(url) změní adresu pomocí History API (bez načtení stránky) a spustí odpovídající trasu. Trasy se porovnávají segment po segmentu: trasa a URL musejí mít stejný počet segmentů a * odpovídá libovolné hodnotě na své pozici. NAV popisuje aktuální polohu: NAV.url je cesta, NAV.query zpracovaný query string a NAV.params argumenty trasy. NAV.back() a NAV.forward() se pohybují v historii, kterou jComponent uchovává.

Pro server je to stále jedna stránka, takže každá URL pod vaší aplikací musí vrátit tentýž HTML (ROUTE('GET /*'), která vykreslí kostru), jinak by opětovné načtení na /users/5/ skončilo chybou 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>

Vyzkoušejte to ve svém prohlížeči

Upravte příklad a spusťte ho. Běží v izolovaném rámu ve vašem prohlížeči; na náš server se nic neposílá.

Kód

Náhled