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

　　

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