vue routeur supprimer l'historique

Dans le processus de développement d'applications monopage à l'aide de Vue Router, nous devons souvent permettre aux utilisateurs d'effacer l'historique du navigateur. Mais Vue Router ne fournit pas de méthode intégrée pour nous aider à implémenter cette fonction, nous devons donc trouver un moyen de l'implémenter nous-mêmes.

Méthode 1 :

Une méthode consiste à utiliser une méthode appelée "replaceState" en Javascript, qui peut remplacer l'entrée actuelle de l'historique du navigateur par une nouvelle entrée pour atteindre l'objectif de supprimer des documents historiques. Nous pouvons utiliser cette méthode avec Vue Router. Les étapes spécifiques sont les suivantes :

1. Tout d'abord, nous devons intercepter tous les événements de saut de routage dans la garde de Vue Router, puis transférer le The. les informations de chemin de l'objet de routage sont enregistrées.

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

2. Ensuite, lorsque l'utilisateur souhaite effacer l'historique du navigateur, nous pouvons obtenir le chemin précédemment enregistré à partir de sessionStorage, puis utiliser la méthode "replaceState" pour remplacer le actuel L'enregistrement historique est remplacé par l'enregistrement historique du chemin, atteignant ainsi l'objectif de suppression de l'enregistrement historique.

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

3. Enfin, nous exposons cette méthode d'effacement de l'historique pour que les utilisateurs puissent l'appeler.

export default {
    clearHistory
}

Pour résumer les étapes de cette méthode :

1. Enregistrez le chemin de l'objet de routage à sauter vers sessionStorage dans la garde de Vue Milieu du routeur.
2. Lorsque vous devez effacer l'historique, récupérez le chemin précédemment enregistré à partir de sessionStorage et utilisez la méthode "replaceState" pour remplacer l'historique actuel par l'historique de ce chemin.
3. Expose une interface API permettant aux utilisateurs d'appeler la méthode d'effacement de l'historique.

Méthode 2 :

Une autre façon d'effacer l'historique du navigateur consiste à utiliser la fonction hook de Vue Router. Les étapes spécifiques sont les suivantes :

1. Nous pouvons utiliser la méthode "replace" dans la fonction globale de post-hook de Vue Router pour remplacer le chemin de routage actuel par le chemin de routage précédent, atteignant ainsi l'objectif de suppression de l'enregistrement de l'historique.

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

2. Ensuite, on peut déclencher l'événement de suppression de l'historique dans le composant. L'implémentation spécifique peut utiliser la méthode $emit de Vue pour transmettre des données au composant parent.

this.$emit('clearHistory')

3. Écoutez l'événement de suppression des enregistrements d'historique dans le composant parent, appelez la méthode "replace" sur l'objet de routage dans la fonction de rappel et remplacez le chemin de l'objet de routage actuel avec le chemin précédent. Cela vous permettra d'effacer l'historique de votre navigateur.

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

Pour résumer les étapes de cette méthode :

1. Dans la fonction globale post hook de Vue Router, enregistrez le chemin de routage du courant page vers sessionStorage.
2. Déclenchez l'événement de suppression de l'enregistrement d'historique dans le composant qui doit supprimer l'enregistrement d'historique et utilisez la méthode $emit pour transmettre les données au composant parent.
3. Écoutez l'événement de suppression des enregistrements d'historique dans le composant parent et appelez la méthode "replace" sur l'objet de routage dans la fonction de rappel pour remplacer le chemin de l'objet de routage actuel par le chemin précédent.

Pour résumer, nous pouvons utiliser l'une ou l'autre de ces deux méthodes pour réaliser la fonction de suppression de l'historique du navigateur. La méthode à choisir peut être basée sur l'activité spécifique. Déterminer les besoins et les scénarios de développement. . J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!