Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Vue-Routing-Hooks und Anwendungsszenarien vor (Zusammenfassung). Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
1. Routing-Hook-Syntax
Im offiziellen Dokument von vue-router wird Routing-Hook als Navigationsschutz übersetzt Sie können es auch senden, indem Sie auf die offizielle Website gehen, um die Details zu lesen.
Routing-Hooks
Routing-Hooks sind hauptsächlich für Benutzer definiert, um beim Routing von Änderungen eine spezielle Verarbeitung durchzuführen. . Was für ein Bissen.
Im Allgemeinen bietet Vue drei Haupttypen von Hooks
Globale Hooks
2. Komponenten-Hooks
from: Route: Die Route, die die aktuelle Navigation verlassen wird
next: Funktion: Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.
next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.
next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.
next(‘/’) oder next({ path: ‘/’ }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }
(1) Löschen Sie den Timer in der aktuellen KomponenteWenn in einer Komponente ein Timer vorhanden ist und die Route gewechselt wird, können Sie beforeRouteLeave verwenden, um den Timer zu löschen, um eine Speicherbelegung zu vermeiden:
(2) Wenn die Seite nicht geschlossene Fenster oder nicht gespeicherte Inhalte enthält, verhindern Sie, dass die Seite springt.
beforeRouteLeave (to, from, next) { window.clearInterval(this.timer) //清楚定时器 next() }
(3) Relevante Inhalte in Vuex oder Session speichern
beforeRouteLeave (to, from, next) { //判断是否弹出框的状态和保存信息与否 if (this.dialogVisibility === true) { this.dialogVisibility = false //关闭弹出框 next(false) //回到当前页面, 阻止页面跳转 }else if(this.saveMessage === false) { alert('请保存信息后退出!') //弹出警告 next(false) //回到当前页面, 阻止页面跳转 }else { next() //否则允许跳转 } }
Verwandte Empfehlungen:
beforeRouteLeave (to, from, next) { localStorage.setItem(name, content); //保存到localStorage中 next() }
Beurteilen Sie, ob der Benutzer angemeldet ist, wenn die Vue-Route springt
Detaillierte Erläuterung der Vue-Routing-verschachtelten SPA-Implementierungsschritte
Ein Beispiel-Tutorial, das Vue-Routing-Jump-Probleme zusammenfasst
Das obige ist der detaillierte Inhalt vonZusammenfassende gemeinsame Nutzung von Vue-Routing-Hooks und Anwendungsszenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!