Appearance:

In normal page jump after A jump to page B (page), click on the browser’s ‘back’ button in the upper left corner, after click, you can see the url address has changed (url from page to page B A), hash value is also back routing, but the browser display without changing the content of the (B) is still A page.

Possible solutions

1. Hash mode

  • Understand url knowledge related to hash mode Url knowledge related to hash of vue-router

  • Handled by the onHashchange event
// App.vue entry: Mounted () {// Check whether the browser does not refresh the page after routing changes. () => { let currentPath = window.location.hash.slice(1) if (this.$route.path ! == currentPath) { this.$router.push(currentPath) } }, false) }Copy the code

2. Try using setTimeout

Disadvantages: Although solvable, the reasonable value of setTimeout cannot be determined. Another problem is maintaining the timer. You need to clear the original timer before clicking, otherwise the execution will be messy.

this.$route.back();
setTimeout(() => {
    this.$store.commit("error/reset");
}, 50)
Copy the code

3. Use the popState event of history provided by H5 to handle

window.addEventListener("popstate", function(e) {
}, false);
Copy the code

Handled by a callback function

  $back(callback) {
      if (NativeExternalRequest.back(callback)) {
          return;
      }
      if (callback) {
          EventUtil.on(window, 'popstate', (e) => {
              EventUtil.off(window, 'popstate');
              callback(e);
          }, EventUtil.defineOptions({
              capture: true,
          }));
      }
      this.$router.back();
  }
Copy the code

Other situations