vue penghala memadam sejarah

Dalam proses membangunkan aplikasi satu halaman menggunakan Penghala Vue, kami selalunya perlu membenarkan pengguna mengosongkan sejarah penyemak imbas. Tetapi Vue Router tidak menyediakan kaedah terbina dalam untuk membantu kami melaksanakan fungsi ini, jadi kami perlu mencari cara untuk melaksanakannya sendiri.

Kaedah 1:

Satu kaedah ialah menggunakan kaedah yang dipanggil "replaceState" dalam Javascript, yang boleh menggantikan entri sejarah penyemak imbas semasa dengan yang baharu, sekali gus mencapai Tujuan memadamkan sejarah. Kita boleh menggunakan kaedah ini dengan Vue Router Langkah-langkah khusus adalah seperti berikut:

1. Pertama, kita perlu memintas semua acara lompat penghalaan dalam pengawal Vue Router, dan kemudian menukar objek penghalaan menjadi. melompat. Maklumat laluan disimpan.

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

2. Kemudian apabila pengguna ingin mengosongkan sejarah penyemak imbas, kita boleh mendapatkan laluan yang disimpan sebelum ini daripada sessionStorage dan kemudian menggunakan kaedah "replaceState" untuk menggantikan sejarah semasa dengan Rekod sejarah laluan ini, untuk mencapai tujuan memadam rekod sejarah.

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

3. Akhir sekali, kami mendedahkan kaedah mengosongkan sejarah ini untuk dihubungi oleh pengguna.

export default {
    clearHistory
}

Untuk meringkaskan langkah kaedah ini:

1. Simpan laluan objek penghalaan untuk dilompat ke sessionStorage dalam pengawal Vue Router.
2. Apabila anda perlu mengosongkan sejarah, dapatkan laluan yang disimpan sebelum ini daripada sessionStorage dan gunakan kaedah "replaceState" untuk menggantikan sejarah semasa dengan sejarah laluan itu.
3. Mendedahkan antara muka API untuk pengguna memanggil kaedah mengosongkan sejarah.

Kaedah 2:

Cara lain untuk mengosongkan sejarah penyemak imbas ialah menggunakan fungsi cangkuk Vue Router Langkah-langkah khusus adalah seperti berikut:

1. Kita boleh gunakan kaedah "ganti" dalam fungsi pasca cangkuk global Vue Router untuk menggantikan laluan penghalaan semasa dengan laluan penghalaan sebelumnya, dengan itu mencapai tujuan memadamkan rekod sejarah.

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

2. Kemudian, kita boleh mencetuskan peristiwa sejarah pemadaman dalam komponen. Pelaksanaan khusus boleh menggunakan kaedah $emit Vue untuk menghantar data kepada komponen induk.

this.$emit('clearHistory')

3. Dengar peristiwa sejarah pemadaman dalam komponen induk, panggil kaedah "ganti" pada objek penghalaan dalam fungsi panggil balik dan gantikan laluan objek penghalaan semasa dengan laluan sebelumnya. Ini akan membolehkan anda mengosongkan sejarah penyemak imbas anda.

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

Untuk meringkaskan langkah kaedah ini:

1. Dalam fungsi pasca cangkuk global Vue Router, simpan laluan penghalaan halaman semasa ke sessionStorage.
2. Cetuskan peristiwa pemadaman rekod sejarah dalam komponen yang perlu memadam rekod sejarah dan gunakan kaedah $emit untuk menghantar data kepada komponen induk.
3. Dengar peristiwa pemadaman rekod sejarah dalam komponen induk, dan panggil kaedah "ganti" pada objek penghalaan dalam fungsi panggil balik untuk menggantikan laluan objek penghalaan semasa dengan laluan sebelumnya.

Ringkasnya, kita boleh menggunakan salah satu daripada dua kaedah ini untuk melaksanakan fungsi memadamkan sejarah penyemak imbas Kaedah yang manakah boleh dipilih berdasarkan keperluan perniagaan tertentu dan adegan pembangunan untuk ditentukan. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci vue penghala memadam sejarah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!