Vue 라우터 삭제 기록

Vue Router를 사용하여 단일 페이지 애플리케이션을 개발하는 과정에서 사용자가 브라우저 기록을 지울 수 있도록 허용해야 하는 경우가 종종 있습니다. 하지만 Vue Router는 이 기능을 구현하는 데 도움이 되는 내장 메서드를 제공하지 않으므로 직접 구현할 방법을 찾아야 합니다.

방법 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:

브라우저 기록을 지우는 또 다른 방법은 Vue Router의 후크 기능을 사용하는 것입니다. 구체적인 단계는 다음과 같습니다.

1. Vue Router의 전역 포스트 후크 기능에서 "replace"를 사용할 수 있습니다. 방법은 현재 라우팅 경로를 이전 라우팅 경로로 대체하여 기록 기록 삭제 목적을 달성합니다.

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

2. 그런 다음 구성 요소에서 기록 삭제 이벤트를 트리거할 수 있습니다. 특정 구현에서는 Vue의 $emit 메소드를 사용하여 상위 구성 요소에 데이터를 전달할 수 있습니다.

this.$emit('clearHistory')

3. 상위 컴포넌트에서 기록 레코드 삭제 이벤트를 듣고 콜백 함수에서 라우팅 개체에 대해 "replace" 메서드를 호출하여 현재 라우팅 개체의 경로를 이전 경로로 바꿉니다. 이렇게 하면 브라우저 기록을 지울 수 있습니다.

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

이 방법의 단계를 요약하면:

1. Vue Router의 전역 포스트훅 기능에서 현재 페이지의 라우팅 경로를 sessionStorage에 저장합니다.
2. 히스토리 레코드를 삭제해야 하는 컴포넌트에서 히스토리 레코드 삭제 이벤트를 트리거하고 $emit 메소드를 사용하여 데이터를 상위 컴포넌트에 전달합니다.
3. 상위 컴포넌트에서 히스토리 레코드 삭제 이벤트를 듣고, 콜백 함수에서 라우팅 객체에 대해 "replace" 메소드를 호출하여 현재 라우팅 객체의 경로를 이전 경로로 대체합니다.

요약하자면, 이 두 가지 방법 중 하나를 사용하여 브라우저 기록 삭제 기능을 구현할 수 있습니다. 어떤 방법을 선택할지는 특정 비즈니스 요구 사항과 개발 시나리오에 따라 결정될 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 Vue 라우터 삭제 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!