Rutează paginile în browser fără reîncărcare

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Executată cu jComponent 20

jComponent are propriul router pentru aplicațiile cu o singură pagină. ROUTE(url, fn) înregistrează o rută: segmentele {name} sunt transmise lui fn ca argumente, în ordine. REDIRECT(url) schimbă adresa cu History API (fără încărcarea paginii) și execută ruta potrivită. Rutele se compară segment cu segment: o rută și un URL trebuie să aibă același număr de segmente, iar * se potrivește cu orice valoare de pe poziția lui. NAV descrie locația curentă: NAV.url este calea, NAV.query query string-ul interpretat, iar NAV.params argumentele rutei. NAV.back() și NAV.forward() se mișcă prin istoricul pe care îl ține jComponent.

Pentru server rămâne o singură pagină, deci fiecare URL din aplicația ta trebuie să returneze același HTML (un ROUTE('GET /*') care randează scheletul), altfel o reîncărcare pe /users/5/ ar da 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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare