The problem of unchanged routing pages in vue project and solutions

The route jump page in vue remains unchanged

question

Today, I found a bug in the process of developing the vue mobile project, that is, when the return key is pressed, the page did not change. At first, I thought that the return event was not listened to, but after testing, I found that the return event was successfully listened to, the route also changed, and the corresponding event was triggered, that is, the page view did not change accordingly.

Solution

The route in the project is set in hash mode, so the hashchange event is listened to (in hash mode, the hashchange event will trigger the hashchange event)

In the hashchange binding event:

 mounted() {
    // Detect the problem of changing the browser route and not refreshing the page. The working principle of hash mode is hashchange event    ('hashchange', () => {
    let currentPath = (1)
    if (this.$ !== currentPath) {
      this.$(currentPath)
    }
  }, false)
}

The route jump page does not refresh, this.$(-1) does not take effect

I encountered this problem in the vue project: using this.$(-1) to return to the previous page, the route has changed, but the page display still stays on the current page, and it needs to be refreshed manually to render the jumped page.

The router-view is as follows:

<router-view :key="$"></router-view>

Generally speaking, using the above writing method can solve the problem, but it still does not take effect here.

Then I thought of the following method:

Solution

When the beforeRouteEnter hook is used, use sessionStorage; then use this.$ when clicking back

Code:

beforeRouteEnter(to, from, next) {
    next(()=> {
      ('lasterRouter', )
    })
  },

//Return to the previous pagethis.$(('lasterRouter'))

The above is personal experience. I hope you can give you a reference and I hope you can support me more.