Solve the problem that the routing jump page of the vue project does not change

question:

Today, I found a bug in the process of developing the vue mobile terminal project, that is, when the return button is pressed, the page does not change. At first, I thought that the return event was not monitored, but after passing the test, I found that the return event monitoring was successful. The routing has also changed, and the corresponding event has also been triggered, that is, the page view has not changed.

Solution:

The route in the project is set in hash mode , so the hashchange event is monitored (in hash mode, the change of the route will trigger the hashchange event)

Bind event to hashchange in App.vue:

 mounted() {
    
    
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是 hashchange事件
    window.addEventListener('hashchange', () => {
    
    
    let currentPath = window.location.hash.slice(1)
    if (this.$route.path !== currentPath) {
    
    
      this.$router.push(currentPath)
    }
  }, false)
}