Routa sidor i webbläsaren utan att ladda om

jComponent 20 · jcomponent@20 jcomponentfrontendroutingspa Körd med jComponent 20

jComponent har en egen router för ensidesapplikationer. ROUTE(url, fn) registrerar en rutt: {name}-segment skickas till fn som argument, i ordning. REDIRECT(url) ändrar adressen med History API (utan sidladdning) och kör den matchande rutten. Rutter jämförs segment för segment: en rutt och en URL måste ha lika många segment, och * matchar vilket värde som helst på sin plats. NAV beskriver den aktuella platsen: NAV.url är sökvägen, NAV.query den tolkade query string och NAV.params rutens argument. NAV.back() och NAV.forward() rör sig genom den historik som jComponent för.

För servern är det fortfarande en enda sida, så varje URL under din applikation måste returnera samma HTML (en ROUTE('GET /*') som renderar skalet), annars skulle en omladdning på /users/5/ ge ett 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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning