If you encounter a bug in web page development where you can't go back or forward, please pay close attention to this bug; you may have encountered a fatal flaw in iframes.
Problem Scenario:
Multiple iframe tags are embedded in a web page, each running an independent SPA (Single Page Application). After multiple forward/backward operations are performed within these iframes,
Then a bug occurs: The web page cannot go back or forward
Calling this.$router.back() / this.$router.forward() / history.go(-1) / window.history.back() fails to return to the previous page; you cannot go back or forward.
You may be experiencing this issue in a Vue.js or Vue-router environment.
This bug is currently unsolvable and is a fatal flaw for user experience.
The reason for the inability to go back and back in iframes: The browser engine does not maintain an independent history stack for each iframe.The forward and backward navigation of multiple iframes causes chaos in the browser's top-level main page's history, resulting in unstable forward and backward navigation for each iframe.
This bug is not related to Vue, Vue-router, or React, but rather to a problem with the browser's underlying implementation. Vue-router can sometimes also cause this bug, usually because the route's callback hook function does not call the `done` function correctly.
However, the inability to go back in iframes caused by using two or more iframes on a single webpage is a more complex problem than that caused by Vue-router.
Extensive use of iframes should be carefully considered, as they may lead to the inability to go back and back in iframes.