vue router delete history

In the process of developing single-page applications using Vue Router, we often need to allow users to clear the browser history. But Vue Router does not provide a built-in method to help us implement this function, so we need to find a way to implement it ourselves.

Method 1:

One method is to use a method called "replaceState" in Javascript, which can replace the current browser history entry with a new entry, thereby achieving Purpose of deleting history. We can use this method with Vue Router. The specific steps are as follows:

1. First, we need to intercept all routing jump events in the guard of Vue Router, and then change the routing object to be jumped. The path information is saved.

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

2. Then, when the user wants to clear the browser history, we can get the previously saved path from sessionStorage and then use the "replaceState" method to replace the current history with The history record of this path, so as to achieve the purpose of deleting the history record.

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

3. Finally, we expose this method of clearing history for users to call.

export default {
    clearHistory
}

To summarize the steps of this method:

1. Save the path of the routing object to be jumped to sessionStorage in the guard of Vue Router.
2. When you need to clear the history, get the previously saved path from sessionStorage, and use the "replaceState" method to replace the current history with the history of that path.
3. Expose an API interface for users to call the method of clearing history.

Method 2:

Another way to clear browser history is to use the hook function of Vue Router. The specific steps are as follows:

1. We can use the "replace" method in the global post-hook function of Vue Router to replace the current routing path with the previous routing path, thereby achieving the purpose of deleting the history record.

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

2. Then, we can trigger the event of deleting the history record in the component. The specific implementation can use Vue's $emit method to pass data to the parent component.

this.$emit('clearHistory')

3. Listen to the event of deleting history records in the parent component, call the "replace" method on the routing object in the callback function, and replace the path of the current routing object with the previous path. This will enable you to clear your browser history.

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

Summarize the steps of this method:

1. In the global post-hook function of Vue Router, save the routing path of the current page to sessionStorage.
2. Trigger the event of deleting the history record in the component that needs to delete the history record, and use the $emit method to pass the data to the parent component.
3. Listen to the event of deleting the history record in the parent component, and call the "replace" method on the routing object in the callback function to replace the path of the current routing object with the previous path.

To sum up, we can use either of these two methods to achieve the function of deleting browser history. Which method to choose can be based on specific business needs and development scene to determine. Hope this article is helpful to you.

The above is the detailed content of vue router delete history. For more information, please follow other related articles on the PHP Chinese website!