Inhaltsverzeichnis
1. Das Konzept des Routenwächters
2. Klassifizierung von Routing-Guards
(3) Exklusiver Schutz der Route
3. Kompletter Navigationsanalyseprozess
4. Interpretation der drei Parameter
1. Das Konzept des Routenwächters
Routenwächter werden hauptsächlich zur Sicherung der Navigation durch Springen oder Abbrechen eingesetzt . Es gibt mehrere Möglichkeiten, den Routennavigationsprozess zu integrieren: global, exklusiv für eine einzelne Route oder auf Komponentenebene.
Es kann einfach als Wachmann an der Tür eines Hauses verstanden werden. Wenn Sie das Haus betreten möchten, müssen Sie die Sicherheitskontrolle bestehen. Sie müssen dem Wachmann sagen, woher Sie kommen? Kann man Fremde nicht einfach reinlassen? Wo hin? Und dann sagt Ihnen der Wachmann, was als nächstes zu tun ist? Wenn Sie tatsächlich eine Person sind, die vom Eigentümer des Hauses Zutritt erhalten hat, wird Ihnen der Zutritt gestattet. Andernfalls müssen Sie den Eigentümer des Hauses anrufen und mit dem Eigentümer besprechen (Anmelden und Registrieren), um Ihnen die Erlaubnis zu geben Erlaubnis.
2. Klassifizierung von Routing-Guards
(1) Globaler Routing-Schutz
Der sogenannte Global Routing Guard ist das Tor der Gemeinde. Es gibt nur ein Tor in der gesamten Gemeinde. Wenn Sie ein Haus betreten möchten, müssen Sie die Inspektion dieses Tores durchlaufen. Es gibt zwei globale Routing Guards: Einer ist der globale Frontschutz und der andere ist
der globale Schutz . Nach dem Schutz umfassen Hook-Funktionen beforeEach , beforeResolve und afterEach in der Reihenfolge der Ausführung .
1. [beforeEach] : Wird ausgelöst, bevor die Route springt. Die Parameter umfassen to, from und next (die Parameter werden separat eingeführt). Dieser Hook wird hauptsächlich zur Anmeldeüberprüfung verwendet. Er wird benachrichtigt, bevor die Route springt. Jump Es wird Es kann zu spät sein, Sie später zu benachrichtigen.
2.[beforeResolve]: Nach dem Parsen der Komponente ähnelt diese Hook-Funktion beforeEach. Sie wird auch vor dem Routensprung ausgelöst und verfügt über drei Parameter: to, from und next.
3. [afterEach]: Im Gegensatz zu beforeEach wird es ausgelöst, nachdem der Routensprung abgeschlossen ist. Die Parameter umfassen to, from, aber nicht next. Es tritt nach beforeEach und beforeResolve sowie vor beforeRouteEnter auf.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
...
next(); //所有前置守卫最后都需要调用next()进入下一个管道
})
// 全局后置守卫，没有next
router.afterEach((to, from) => {
...
})
// 全局前置解析守卫，和router.beforeEach类似，在所有组件内守卫以及异步路由组件解析完后触发
router.beforeResolve((to, from, next) => {
...
next();
})(2) Komponentenführungsschutz
Der Component Routing Guard ist eine innerhalb der Komponente ausgeführte Hook-Funktion. Ähnlich wie bei den Lebenszyklus-Hook-Funktionen innerhalb der Komponente lautet die Ausführungsreihenfolge beforeRouteEnter, beforeRouteUpdate und beforeRouteLeave.
1.[beforeRouteEnter]: Wird vor der Routeneingabe aufgerufen. Zu den Parametern gehören to, from, next. Diese Hook-Funktion wird nach dem globalen Guard beforeEach und dem exklusiven Guard beforeEnter sowie vor dem globalen beforeResolve und dem globalen afterEach aufgerufen.
2.[beforeRouteUpdate]: Wird aufgerufen, wenn sich die aktuelle Route ändert und die Komponente wiederverwendet wird. Über diese kann auf die Instanz zugegriffen werden. Zu den Parametern gehören to, from, next. Dieser Wächter wird aufgerufen, wenn sich die aktuelle Routenabfrage ändert.
3.[beforeRouteLeave]: Wird aufgerufen, wenn die Navigation die entsprechende Route der Komponente verlässt. Sie können auf die Komponenteninstanz zugreifen, und die Parameter umfassen „to“, „from“ und „next“.
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}(3) Exklusiver Schutz der Route
Definieren Sie Guards direkt in der Routenkonfiguration beforeEnter :
[beforeEnter] : Genau das Gleiche wie beforeEach. Wenn beide festgelegt sind, wird es unmittelbar nach beforeEach, den Parametern to, from, next, ausgeführt
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})3. Kompletter Navigationsanalyseprozess
- Die Navigation wird ausgelöst.
- Rufen Sie den Wächter in der deaktivierten Komponente an
beforeRouteLeave. - Rufen Sie die globale
beforeEachWache. beforeRouteUpdateRufen Sie Guards (2.2+) in wiederverwendeten Komponenten auf.- Wird in der Routing-Konfiguration aufgerufen
beforeEnter. - Lösen Sie asynchrone Routing-Komponenten auf.
- Wird in der aktivierten Komponente aufgerufen
beforeRouteEnter. - Rufen Sie globale
beforeResolveWachen an (2,5+). - Die Navigation ist bestätigt.
- Rufen Sie globale
afterEachHooks auf. - DOM-Update auslösen.
- Rufen Sie die
beforeRouteEnterim Guard übergebene Rückruffunktion aufnext, und die erstellte Komponenteninstanz wird als Parameter der Rückruffunktion übergeben.
4. Interpretation der drei Parameter
1.to: Ziel-Routing-Objekt, dh der Ort, an den Sie gehen;
2.von: das Routing-Objekt, das gerade verlassen wird;
3.next: Dies ist der wichtigste Parameter. Erst nach dem Aufruf dieser Methode können Sie die nächste Hook-Funktion eingeben.
(1) next() // Geben Sie direkt die Route ein, auf die gezeigt wird
(2) next(false) // Unterbrechen Sie die aktuelle Route
(3) next('route') // Springen Sie zur angegebenen Route
(4) next( 'error') //Zur Fehlerroute springen
Weitere Einzelheiten finden Sie in der offiziellen Dokumentation.——
https://router.vuejs.org/en/guide/advanced/navigation-guards.html#to