Löschverlauf des Vue-Routers

Bei der Entwicklung von Single-Page-Anwendungen mit Vue Router müssen wir Benutzern häufig erlauben, den Browserverlauf zu löschen. Da Vue Router jedoch keine integrierte Methode bietet, die uns bei der Implementierung dieser Funktion hilft, müssen wir einen Weg finden, sie selbst zu implementieren.

Methode 1:

Eine Methode besteht darin, eine Methode namens „replaceState“ in Javascript zu verwenden, die den aktuellen Browser-Verlaufseintrag durch einen neuen ersetzen und so den Zweck des Löschens des Verlaufseintrags erreichen kann. Wir können diese Methode mit Vue Router verwenden. Die spezifischen Schritte sind wie folgt:

1. Zuerst müssen wir alle Routing-Sprungereignisse im Schutz des Vue Routers abfangen und dann die Pfadinformationen des zu überspringenden Routing-Objekts speichern.

router.beforeEach((to, from, next) => {
    sessionStorage.setItem('toPath', to.fullPath) // 保存即将跳转的路由对象的路径
    next()
})

2. Wenn der Benutzer dann den Browserverlauf löschen möchte, können wir den zuvor gespeicherten Pfad aus sessionStorage abrufen und dann die Methode „replaceState“ verwenden, um den aktuellen Verlauf durch den Verlauf dieses Pfads zu ersetzen und so den Zweck zu erreichen des Löschens der Geschichte.

function clearHistory() {
    const toPath = sessionStorage.getItem('toPath')
    history.replaceState(null, '', toPath)
    sessionStorage.removeItem('toPath')
}

3. Abschließend stellen wir diese Methode zum Löschen des Verlaufs zur Verfügung, damit Benutzer sie aufrufen können.

export default {
    clearHistory
}

Um die Schritte dieser Methode zusammenzufassen:

1. Speichern Sie den Pfad des Routing-Objekts, das in sessionStorage im Schutz des Vue Routers gesprungen werden soll.
2. Wenn Sie den Verlauf löschen müssen, rufen Sie den zuvor gespeicherten Pfad aus sessionStorage ab und verwenden Sie die Methode „replaceState“, um den aktuellen Verlauf durch den Verlauf dieses Pfads zu ersetzen.
3. Stellen Sie eine API-Schnittstelle bereit, über die Benutzer die Methode zum Löschen des Verlaufs aufrufen können.

Methode 2:

Eine andere Möglichkeit, den Browserverlauf zu löschen, besteht darin, die Hook-Funktion von Vue Router zu verwenden. Die spezifischen Schritte sind wie folgt:

1. Wir können „Ersetzen“ in der globalen Post-Hook-Funktion von Vue Router verwenden. Die Methode ersetzt den aktuellen Routing-Pfad durch den vorherigen Routing-Pfad und erreicht so den Zweck, historische Datensätze zu löschen.

router.afterEach((to, from) => {
    if (!sessionStorage.getItem('isBack')) {
        history.replaceState(null, '', from.fullPath)
        sessionStorage.setItem('fromPath', from.fullPath) // 保存从哪个路由页面来
    }
    sessionStorage.removeItem('isBack') // 操作完后，清除标识变量
})

2. Dann können wir das Ereignis „Verlauf löschen“ in der Komponente auslösen. Die spezifische Implementierung kann die $emit-Methode von Vue verwenden, um Daten an die übergeordnete Komponente zu übergeben.

this.$emit('clearHistory')

3. Hören Sie auf das Ereignis des Löschens von Verlaufsdatensätzen in der übergeordneten Komponente, rufen Sie die Methode „replace“ für das Routing-Objekt in der Rückruffunktion auf und ersetzen Sie den Pfad des aktuellen Routing-Objekts durch den vorherigen Pfad. Dadurch können Sie Ihren Browserverlauf löschen.

<template>
    <button @click="handleClearHistory">清除历史记录</button>
</template>
<script>
export default {
    methods: {
        handleClearHistory() {
            this.$router.replace(sessionStorage.getItem('fromPath'))
            sessionStorage.setItem('isBack', 'true')
        }
    }
}
</script>

Um die Schritte dieser Methode zusammenzufassen:

1. Speichern Sie in der globalen Post-Hook-Funktion von Vue Router den Routing-Pfad der aktuellen Seite im SessionStorage.
2. Lösen Sie das Ereignis zum Löschen des Verlaufsdatensatzes in der Komponente aus, die den Verlaufsdatensatz löschen muss, und verwenden Sie die Methode $emit, um die Daten an die übergeordnete Komponente zu übergeben.
3. Überwachen Sie das Ereignis des Löschens des Verlaufsdatensatzes in der übergeordneten Komponente und rufen Sie in der Rückruffunktion die Methode „Ersetzen“ für das Routing-Objekt auf, um den Pfad des aktuellen Routing-Objekts durch den vorherigen Pfad zu ersetzen.

Zusammenfassend können wir eine dieser beiden Methoden verwenden, um die Funktion zum Löschen des Browserverlaufs zu implementieren. Welche Methode wir wählen, kann basierend auf spezifischen Geschäftsanforderungen und Entwicklungsszenarien bestimmt werden. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonLöschverlauf des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!