javascript - vue 단일 페이지 앱으로 인해 브라우저가 돌아가는 것을 방지할 수 있나요?

Question

웹 앱 단일 페이지 애플리케이션은 vue vue-router를 사용하여 작성되었습니다.

일부 페이지는 되돌리기를 금지해야 합니다. AllowBack과 같은 라우팅 메타 정보 메타에 현재 페이지로 돌아갈 수 있는지 여부를 썼습니다.

정보를 찾았으며 돌아가기를 비활성화하는 방법은
history.pushState(null, null, location.href)

입니다.

이전 프로젝트에서는 vue1.0을 사용했는데, 해결책은

으아아아

이제 vue2.0으로 전환했는데 원래 방법은 더 이상 작동하지 않습니다.

이제 문제는 코드를 어디에 넣어야 할지 모른다는 것입니다.history.pushState(null, null, location.href)
아니면 다른 해결 방법이 있나요? 감사해요! !

---

실제로 주요 사용 시나리오는 다음과 같습니다.
탭바를 클릭하여 다른 페이지로 전환합니다. 현재 페이지 a에 있고 탭바를 클릭하여 b페이지로 이동하는 경우 return 키를 눌러도 a 페이지로 돌아갈 수 없습니다. 하지만 페이지

를 클릭하면 페이지로 이동할 수 있습니다.

Answer 1

질문과 답변...
요구사항: 특정 경로는 서로 간의 전환에 영향을 주지 않고 브라우저를 통해 반환될 수 없습니다.
해결책과 사용법을 정리해보자:

1 라우팅 구성에서 이 경로에 다음과 같은 메타 정보를 추가합니다. 으아악

2 전역 router.beforeEach 함수에서 AllowBack 상태를 가져오고 동시에 다음과 같이 vuex의 AllowBack 값을 업데이트합니다. 으아악

이 코드는 반드시 next() 뒤에 작성해야 합니다. 왜냐하면 next() 앞에 작성된 location.href는 vue1.0과 조금 다른 to의 주소가 아니기 때문입니다

3. 다음 단계는 핵심입니다. app.vue에 탑재된 onpopstate 이벤트를 등록하세요.

으아악

history.pushState(null, null, location.href)를 제거하면 백오프를 방지할 수도 있지만 구성 요소가 다시 렌더링되므로 이 부분도 중요합니다

Answer 2

이것을 시험해 보고 확인해 보세요

으아악