vueルーターの削除履歴

Vue Router を使用してシングルページ アプリケーションを開発するプロセスでは、多くの場合、ユーザーがブラウザ履歴をクリアできるようにする必要があります。ただし、Vue Router にはこの機能の実装に役立つ組み込みメソッドが提供されていないため、自分で実装する方法を見つける必要があります。

方法 1:

1 つの方法は、JavaScript で「replaceState」と呼ばれるメソッドを使用することです。これにより、現在のブラウザ履歴エントリを新しいエントリに置き換えることで、履歴を削除するという目的を達成できます。 Vue Router でこのメソッドを使用できます。具体的な手順は次のとおりです:

1. まず、Vue Router のガードですべてのルーティング ジャンプ イベントをインターセプトし、ルーティング オブジェクトを次のように変更する必要があります。パス情報が保存されます。

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

2. ユーザーがブラウザ履歴をクリアしたい場合は、sessionStorage から以前に保存したパスを取得し、「replaceState」メソッドを使用して現在の履歴を履歴に置き換えます。履歴レコードを削除する目的を達成するために、このパスのレコードを削除します。

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

3. 最後に、ユーザーが呼び出せる履歴をクリアするこのメソッドを公開します。

export default {
    clearHistory
}

このメソッドの手順を要約すると:

1. Vue Router のガード内の sessionStorage にジャンプするルーティング オブジェクトのパスを保存します。
2. 履歴をクリアする必要がある場合は、sessionStorage から以前に保存したパスを取得し、「replaceState」メソッドを使用して、現在の履歴をそのパスの履歴で置き換えます。
3. ユーザーが履歴をクリアするメソッドを呼び出すための API インターフェイスを公開します。

方法 2:

ブラウザ履歴をクリアするもう 1 つの方法は、Vue Router のフック機能を使用することです。具体的な手順は次のとおりです。 Vue Router のグローバル ポストフック関数の「replace」メソッドを使用して、現在のルーティング パスを以前のルーティング パスに置き換えることで、履歴レコードを削除するという目的を達成できます。

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

ログイン後にコピー
次に、コンポーネント内の履歴レコードを削除するイベントをトリガーできます。特定の実装では、Vue の $emit メソッドを使用して、データを親コンポーネントに渡すことができます。

this.$emit('clearHistory')

ログイン後にコピー
親コンポーネントで履歴レコードを削除するイベントをリッスンし、コールバック関数でルーティング オブジェクトの「replace」メソッドを呼び出し、現在のルーティング オブジェクトのパスを置き換えます。前のパスと一緒に。これにより、ブラウザの履歴をクリアできるようになります。

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

ログイン後にコピー
3. このメソッドの手順を要約します。

Vue Router のグローバル ポストフック関数で、現在のページのルーティング パスを sessionStorage に保存します。

履歴レコードを削除する必要があるコンポーネントで履歴レコードを削除するイベントをトリガーし、$emit メソッドを使用してデータを親コンポーネントに渡します。
1. 親コンポーネントで履歴レコードを削除するイベントをリッスンし、コールバック関数でルーティング オブジェクトの「replace」メソッドを呼び出して、現在のルーティング オブジェクトのパスを以前のパスに置き換えます。
3. まとめると、これら 2 つの方法のいずれかを使用してブラウザ履歴を削除する機能を実現できますが、どちらの方法を選択するかは、特定のビジネス ニーズと開発シーンに基づいて決定できます。この記事がお役に立てば幸いです。

以上がvueルーターの削除履歴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。