Back Funktion in Vue mit Vue-Router abfangen

Bei der Entwicklung von Vue Webanwendungen hat man in der Regel mehrere Ansichten oder Dialoge innerhalb einer Unterseite. Bei dem Betätigen der Zurücktaste im Browser oder direkt an der Maus wird allerdings die letzte Seite in der History geöffnet. Etwaige Fortschritte gehen somit verloren.

Eine einfache Möglichkeit dieses Verhalten abzufangen sind Router Guards. Wir können hier den Seitenwechsel abfangen, abfragen ob gerade etwas aktiv ist und den Seitenwechsel erlauben oder abbrechen.

Im ersten Schritt muss in der Komponente die wir bearbeiten möchten innerhalb des created Events der Router Guard hinterlegt werden.

const unregisterRouterGuard = this.$router.beforeEach((to, from, next) => {

});

this.$once('hook:destroyed', () => {
    unregisterRouterGuard();
});

Innerhalb der Funktion können wird jetzt angeben welche v-models welches Verhalten auslösen sollten.

if (this.showData) {
    this.backFunction();
    next(false);
} else {
   next();
}

In diesem Beispiel haben wir einen modalen Dialog mit dem v-model showData. Wenn dieser auf true steht, dann ist der Dialog gerade offen. Der User möchte allerdings nicht sofort auf die vorherige Seite, sondern den Dialog schließen.

Wir führen die Funktion backFunction() aus um den Dialog zu schließen und verhindern mit next(false) die Weiterleitung.

Problematik: Der User hat einen modalen Dialog, Karte oder ähnliches geöffnet, möchte allerdings über die Navigation auf eine andere Unterseite. Bei Betätigen des router-links wird das Verlassen der Seite abgebrochen und der Dialog wird geschlossen.

Um dieses Verhalten zu Verhindern fügen wir dem mounted Event einen Event-Listener hinzu:

this.$root.$on("overwrite", () => {
    this.routerGuardOverwrite = true;
});

Der Router Link in der Navigation bekommt ein @click, welches den Overwrite ausführt.

<router-link to="/nextcloud" v-if="roleAttributes.includes('nextcloud')">
    <v-list-item link @click="handleLinkClick()">
        <v-list-item-action>
            <v-icon>mdi-cloud</v-icon>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title>
                Nextcloud
            </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</router-link>

handleLinkClick: function () {
    this.$root.$emit("overwrite");
},

Abschließend können wir am Anfang des Router Guards das Verlassen der Seite erlauben.

if (this.routerGuardOverwrite) {
    next();
    return;
}

Sollten Sie noch Fragen haben oder eine Beratung wünschen, können Sie gerne mit uns Kontakt aufnehmen oder unsere Webseite besuchen.