关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转

情景：

在进行正常页面跳转操作后（页面A跳转到页面B），点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化（url由页面B变为页面A），hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化（依旧是页面B）。

没有任何报错（页面A和页面B无任何js错误或者兼容性错误）。

若有错误也会导致页面跳转不成功，页面依旧是当前页面，但是控制台会报ERROR。

但是页面按浏览器刷新按钮后，一切又恢复了正常。真的让人很头疼，IE,Chrome,fireFox,Edge都是这样

过程:

百度查了很多，就是hash模式导致的，所以重新出发下hashchange事件解决了问题，

具体如下：

本地路由配置：

 const baseRoute = [
   { path: '/login', name: 'login', component: Login },
   { path: '/404', name: 'page404', component: page404 },
   {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},
   {
     path: '/',
     redirect: '/index',
     component: Layout,
     children: [
       {
         path: 'index',
         name: 'index',
         component: xxxx,
         meta: {
           title: 'xxx',
           icon: ''
         }
       },
       {
         path: 'project',
         name: 'project',
         component: xxxx,
         meta: {
           dynamic: true, // 动态面包屑标题
           title: ''
         }
       },
       {
         path: 'project/onlineEquip/debug/:id',
         name: 'debug',
         component: Debug,
         meta: {
           title: '调试',
           level: 3,
           hidden: true
         }
       },
       {
         path: 'project/onlineEquip/detail/:id',
         name: 'detail',
         component: Detail,
         meta: {
           title: 'xxx',
           level: 3,
           hidden: true
         }
       },
       {
         path: 'project/log',
         name: 'log',
         component: Log,
         meta: {
           title: '日志',
           level: 2,
           hidden: true
         }
       },
       {
         path: 'project/myPhyModel',
         name: 'CreateModel',
         component: xxxxx,
         meta: {
           title: 'xxxxx',
           level: 2,
           hidden: true
         }
       },
       {
         path: 'project/myPhyModel/detail',
         name: 'ModelDetail',
         component: xxx,
         meta: {
           title: '详情',
           level: 3,
           hidden: true
         }
       }
     ]
   },
   {
     path: '*', // 页面不存在的情况下会跳到404页面
     redirect: '/404',
     name: 'notFound',
     hidden: true
   }
 ]
 const router = new Router({
   routes: baseRoute    // 这里默认是hash模式
 })

 export default router

解决办法：

1、vue-router HTML5 History 模式  可以设置为history 模式解决问题

2、在hash模式的前提下来解决，

　　a、首先学习下hash模式的url相关知识

　　

　　

　　b、对，就是通过onhashchange 事件来解决这个bug

　　　　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)
  },

　　

　　重新刷新一遍路由，问题就可以解决啦！