vue router 删除历史记录

2023-05-24 15:37

短信预约 -IT技能 免费直播动态提醒

在使用Vue Router开发单页应用的过程中，我们经常需要让用户能够清除浏览器的历史记录。但是Vue Router并没有提供一个内置的方法帮助我们实现这一功能，所以我们需要想办法自己实现。

方法一：

一种方法是使用Javascript中的一个叫做“replaceState”的方法，该方法可以将当前浏览器历史记录的条目替换为新的条目，从而达到删除历史记录的目的。我们可以把这个方法和Vue Router一起使用，具体步骤如下：

首先，我们需要在Vue Router的守卫中拦截所有的路由跳转事件，然后将要跳转的路由对象的路径信息保存下来。

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

然后，当用户想要清除浏览器历史记录时，我们可以从sessionStorage中获取之前保存的路径，然后使用“replaceState”方法将当前的历史记录替换为该路径的历史记录，从而达到删除历史记录的目的。

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

最后，我们把这个清除历史记录的方法暴露出来，供用户调用。

export default {
    clearHistory
}

总结一下这种方法的步骤：

在Vue Router的守卫中保存即将跳转的路由对象的路径到sessionStorage中。
当需要清除历史记录时，从sessionStorage中获取之前保存的路径，使用“replaceState”方法将当前的历史记录替换为该路径的历史记录。
暴露一个API接口，供用户调用清除历史记录的方法。

方法二：

另一种实现清除浏览器历史记录的方法是使用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>

总结一下这种方法的步骤：