So verwenden Sie Navigationswächter in Vue3

1. Was ist ein Navigationsschutz?

Wie der Name schon sagt, wird der von vue-router bereitgestellte Navigationsschutz hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. Es gibt viele Möglichkeiten, die Routennavigation darin zu integrieren: global, exklusiv für eine einzelne Route oder auf Komponentenebene.

Überprüfen Sie die folgende Situation:

Standardmäßig kann durch Klicken auf den Homepage-Link direkt die angegebene Schnittstelle aufgerufen werden, für diese Schnittstelle muss sich der Benutzer jedoch anmelden, bevor er darauf zugreifen kann . Das ist ein Problem

Sie können Navigationswächter einrichten, um zu erkennen, ob der Benutzer angemeldet ist. Wenn er angemeldet ist, gelangt er zur Hintergrundseite . Wenn er nicht angemeldet ist, zwingt er sich, die Anmeldeseite aufzurufen, wie im Bild gezeigt

2. Welche Arten der Navigation Wachen sind da?

1. Globale Wachen (3)

Globale Frontwache

Jedes Mal, wenn ein Routing-Navigationssprung auftritt, Die globale Frontwache wird ausgelöst. Daher können Programmierer im globalen Front Guard die Zugriffsrechte jeder Route steuern 🎜#

Sie können

router.beforeEach((to, from, next) verwenden. => {}) auf der Seite router/index.js

Registrieren Sie einen globalen Frontschutz.

2. Code:

// router/index.js 页面

router.beforeEach((to, from, next) => {
    console.log(to, from);
    next()
});

Globaler Parsingschutz

1. So verwenden Sie Sie Sie können router.beforeResolve verwenden, um einen globalen Wächter zu registrieren. Dies ähnelt router.beforeEach darin, dass es bei jeder Navigation ausgelöst wird, aber sicherstellt, dass der Parsing-Guard korrekt aufgerufen wird, bevor die Navigation bestätigt wird und nachdem alle komponenteninternen Guards und asynchronen Routenkomponenten analysiert wurden.

2. Code:

#

// router/index.js 页面

router.beforeResolve((to, from, next) => {
    console.log(to,from);
    next()
})

globaler Post-Hook

1 Globale Post-Hooks können ebenfalls registriert werden, aber im Gegensatz zu Guards akzeptieren diese Hooks weder die nächste Funktion noch ändern sie die Navigation selbst: 2 Code:

// router/index.js 页面

router.afterEach((to, from) => {
    console.log(to,from);
})

Sie sind nützlich B. zur Analyse, zum Ändern von Seitentiteln, zum Beanspruchen von Barrierefreiheitsfunktionen wie Seiten und vielen anderen Dingen.

2. Routen-Exklusivschutz (1)

1. So verwenden Sie

Sie können # direkt definieren 🎜🎜#beforeEnter

auf der Routing-Konfiguration Guard:

2, Code:

// router/index.js 页面（路由规则中）

const routes = [
	{
	    path: '/home',
	    name: 'Home',
	    component: HomeView,
	    beforeEnter: (to, from,next) => {
	        console.log(to, from);
	        next()
	    },
	}, 
]

3, Da Es gibt drei Wächter in der Komponente: beforeRouteEnter, bevor die Route eintritt, beforeRouteLeave, wenn die Route verlässt, und beforeRouteUpdate, wenn die Seite aktualisiert wird

beforeRouteEnter (zu, von, weiter)

1. Verwendung wird in der Komponentenvorlage verwendet und auf derselben Ebene wie die Methoden geschrieben: {} Der Komponenten-Routing-Guard wird in jede separate Vue-Datei geschrieben. 2. Code:

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

Hinweis: Der beforeRouterEnter-Routenwächter kann nicht in der Setup-Funktion in vue3 verwendet werden#🎜🎜 #beforeRouteUpdate(to, from, next)#🎜 🎜#1. Verwendung

Wird in Komponentenvorlagen verwendet und auf derselben Ebene wie die Methoden geschrieben: {}. Komponenten-Routing-Guards werden in jedem separaten Route-Guard in der Vue-Datei geschrieben.

2.

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

beforeRouteLeave(to, from, next)

1. Verwendung in der Komponentenvorlage, geschrieben auf derselben Ebene wie Methoden: {}, Komponente Routenwächter sind Routenwächter, die in jeder separaten Vue-Datei

2 geschrieben sind, die drei Parameter des Navigationswächters

#. ??

next: Funktion

ruft next() auf, um die Freigabe anzuzeigen und diese Routennavigation zuzulassen.
#🎜 🎜#Call next(false), um anzugeben, dass die Route ausgeführt wird nicht freigegeben werden und diese Routennavigation ist nicht zulässig

Rufen Sie next({routerPath}) auf, um anzugeben, dass zu dieser Adresse navigiert wird. Wenn der Benutzer nicht angemeldet ist, navigiert er im Allgemeinen zur Anmeldeschnittstelle.

Tipp: Diese Funktion kann mehrfach im Navigationsschutz erscheinen, aber nur einmal aufgerufen werden!!!

4. So verwenden Sie beforeRouteEnter in vue3

• Wenn Sie die kombinierten API- und Setup-Funktionen zum Schreiben von Komponenten verwenden, können Sie Aktualisierungen jeweils über onBeforeRouteUpdate und hinzufügen onBeforeRouteLeave und Wache verlassen. Weitere Informationen finden Sie im Abschnitt „Composition API“.

• Weitere Informationen finden Sie in der offiziellen Dokumentation von vue-router
  Vue Router

• Methode 1, wir können beim Festlegen der Route die Methode beforeEnter zum Abfangen verwenden, d um den beforeRouterEnter-Hook zu verwenden.了

  // vue 组件内使用
  
  onBeforeRouteLeave((to, from) => {
    //离开当前的组件，触发
    alert("我离开啦");
  });

  5. Simulierter Login-Registrierungsfall

  {
  	path: '/',
  	name: 'home
  	component: () => import('@/xxx.vue'),
  	beforeEnter: (to, from) => {
  		// 可以在定义路由的时候监听from和to
  	}
  }

  Das obige ist der detaillierte Inhalt vonSo verwenden Sie Navigationswächter in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!