Vue - Routing - Versionsgeschichte

37.49.72.8 am 11. Januar 2021 um 16:21 Uhr

2021-01-11T16:21:44Z

2021-01-09T02:26:42Z

2021-01-09T02:09:33Z

Navigation Guard - beforeEnter

2021-01-09T02:01:39Z

Navigation Guard - beforeEnter

2021-01-09T01:55:03Z

Navigation Guard - beforeEnter

2021-01-09T01:41:20Z

Navigation Guard - beforeEnter

2021-01-09T01:36:48Z

Navigation Guard - beforeEnter

2021-01-09T01:32:38Z

Navigation Guards

2021-01-09T01:09:52Z

Controlling Scrolling Behaviour - scrollBehaviour

2021-01-09T00:49:43Z

Multiple Routes

← Nächstältere Version		Version vom 11. Januar 2021, 16:21 Uhr
Zeile 1:		Zeile 1:
		+	[[Vue.js]]
		+	[[Vue - Snippets]]
		+
	Mit Vue erstellt man oft sogenannte Single Page Applications. D.h. alle Ansichten (Views) sind technisch gesehen auf einer HTML-Seite.		Mit Vue erstellt man oft sogenannte Single Page Applications. D.h. alle Ansichten (Views) sind technisch gesehen auf einer HTML-Seite.

@@ Zeile 350: / Zeile 350: @@
+   }
 //...
 </syntaxhighlight>

@@ Zeile 284: / Zeile 284: @@
 </syntaxhighlight>
-== Navigation Guard - beforeEnter ==
+== Navigation Guard ==
-Es gibt den Navigation Guard in Form der Funktion '''beforeEnter'''. Das ist im Prinzip ein Hook. Dieser wird getriggert sobald eine Navigation stattfindet (die Seite sich ändert) und ermöglicht es in die Ausführung einzugreifen. Dies kann man z.B für '''Authentication''' nutzen, oder um '''Änderungen zu tracken''', oder um zu verhindern, dass ein Benutzer die '''Seite ausversehen wechselt''' bevor er gespeichert hat.
+Navigation Guards sind im Prinzip Hooks, die getriggert werden wenn eine Navigation stattfindet.
 Die Guard Funktion wird aufgerufen sobald eine Navigation stattfindet (Link klicken oder Seite manuell laden) Übergeben werden neben den to und from Argumenten noch ein next argument (Namen sind frei wählbar, Reihenfolge ist wichtig).
@@ Zeile 312: / Zeile 314: @@
 Da er nach der Navigation ausgeführt wird benötigt er kein next Argument. Er eignet sich z.b. um Analytics Infos oder Protokolldaten an den Server zu senden.
 === Globale und lokale Navigation Guards ===
 die Funktion beforeEnter kann man auf der router Ebene oder auf der Ebene der einzelnen routes einsetzen. Je nachdem wird sie nur aufgerufen wenn die Route gerendert wird, oder wenn global bei jeder Änderung der Seite (auch beim ersten Aufruf)

@@ Zeile 334: / Zeile 334: @@
+   }
+}
 </syntaxhighlight>

@@ Zeile 310: / Zeile 310: @@
 });
 </syntaxhighlight>
 Da er nach der Navigation ausgeführt wird benötigt er kein next Argument. Er eignet sich z.b. um Analytics Infos oder Protokolldaten an den Server zu senden.
 === Globale und lokale Navigation Guards ===
@@ Zeile 318: / Zeile 319: @@
 Für Komponenten die z.B. über ein for Schleife wiederverwendet werden gibt es noch den
 '''beforeRouteUpdate''' Hook.

@@ Zeile 302: / Zeile 302: @@
 next entscheidet, ob die Navigation ausgeführt wird oder nicht. Next enthält true, false oder ein Ziel in Form eines Strings oder Route Objekts. Default ist true wenn kein Parameter angegeben ist.
 Es gibt auch einen Hook, der nach der Navigation ausgeführt wird. Den afterEach() Navigation Guard:
 <syntaxhighlight lang="javascript">
@@ Zeile 309: / Zeile 310: @@
 });
 </syntaxhighlight>
+Da er nach der Navigation ausgeführt wird benötigt er kein next Argument. Er eignet sich z.b. um Analytics Infos oder Protokolldaten an den Server zu senden.
 === Globale und lokale Navigation Guards ===
 die Funktion beforeEnter kann man auf der router Ebene oder auf der Ebene der einzelnen routes einsetzen. Je nachdem wird sie nur aufgerufen wenn die Route gerendert wird, oder wenn global bei jeder Änderung der Seite (auch beim ersten Aufruf)

@@ Zeile 266: / Zeile 266: @@
 == Controlling Scrolling Behaviour - scrollBehaviour ==
 Es gibt ein weiteres Objekt für die Konfiguration des Routers. Das scrollBehaviour Objekt. Es ist kein Kindobjekt von routes sondern ein eigenständiges Objekt wie z.b. history. scrollBehaviour eine Funktion die automatisch 3 Argumente bekommt nämlich auf welcher Seite der User gelandet ist, wo er her kam und an welcher Stelle er zuletzt gescrollt hat. Als Rückgabewert gibt man ein Objekt zurück das angibt wohin man scrollen möchte:
 <syntaxhighlight lang="javascript">
 scrollBehavior(to, from, savedPosition){
@@ Zeile 282: / Zeile 283: @@
+     }
 </syntaxhighlight>

← Nächstältere Version		Version vom 9. Januar 2021, 00:49 Uhr
Zeile 263:		Zeile 263:
	* in der Router Konfiguration statt dem component, das components (mitn s) Objekt ersetzen und die Komponentennamen definieren. Dabei übergibt man ein Objekt mit den Namen und den Views bzw. Komponenten		* in der Router Konfiguration statt dem component, das components (mitn s) Objekt ersetzen und die Komponentennamen definieren. Dabei übergibt man ein Objekt mit den Namen und den Views bzw. Komponenten
	components:{ default: TeamsList, footer: TeamsFooter},		components:{ default: TeamsList, footer: TeamsFooter},
		+
		+	== Controlling Scrolling Behaviour - scrollBehaviour ==
		+	Es gibt ein weiteres Objekt für die Konfiguration des Routers. Das scrollBehaviour Objekt. Es ist kein Kindobjekt von routes sondern ein eigenständiges Objekt wie z.b. history. scrollBehaviour eine Funktion die automatisch 3 Argumente bekommt nämlich auf welcher Seite der User gelandet ist, wo er her kam und an welcher Stelle er zuletzt gescrollt hat. Als Rückgabewert gibt man ein Objekt zurück das angibt wohin man scrollen möchte:
		+	<syntaxhighlight lang="javascript">
		+	scrollBehavior(to, from, savedPosition){
		+	// to is where we navigate to (route object),
		+	// from page where we came from
		+	// savePosition stores our last page offset
		+	// this function should return where to scroll
		+
		+	// console.log(to, from, savedPosition)
		+
		+	if (savedPosition){
		+	return savedPosition;
		+	}else{
		+	return {left: 0, top: 0}
		+	}
		+	}
		+	</syntaxhighlight>