情景：

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

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

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

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

过程:

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

具体如下：

本地路由配置：

1 const baseRoute =[2 { path: '/login', name: 'login', component: Login },3 { path: '/404', name: 'page404', component: page404 },4 {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},5 {6 path: '/',7 redirect: '/index',8 component: Layout,9 children: [10 {11 path: 'index',12 name: 'index',13 component: xxxx,14 meta: {15 title: 'xxx',16 icon: ''

17 }18 },19 {20 path: 'project',21 name: 'project',22 component: xxxx,23 meta: {24 dynamic: true, //动态面包屑标题

25 title: ''

26 }27 },28 {29 path: 'project/onlineEquip/debug/:id',30 name: 'debug',31 component: Debug,32 meta: {33 title: '调试',34 level: 3,35 hidden: true

36 }37 },38 {39 path: 'project/onlineEquip/detail/:id',40 name: 'detail',41 component: Detail,42 meta: {43 title: 'xxx',44 level: 3,45 hidden: true

46 }47 },48 {49 path: 'project/log',50 name: 'log',51 component: Log,52 meta: {53 title: '日志',54 level: 2,55 hidden: true

56 }57 },58 {59 path: 'project/myPhyModel',60 name: 'CreateModel',61 component: xxxxx,62 meta: {63 title: 'xxxxx',64 level: 2,65 hidden: true

66 }67 },68 {69 path: 'project/myPhyModel/detail',70 name: 'ModelDetail',71 component: xxx,72 meta: {73 title: '详情',74 level: 3,75 hidden: true

76 }77 }78 ]79 },80 {81 path: '*', //页面不存在的情况下会跳到404页面

82 redirect: '/404',83 name: 'notFound',84 hidden: true

85 }86 ]87 const router = newRouter({88 routes: baseRoute //这里默认是hash模式

89 })90

91 export default router

View Code

解决办法：

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

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)

},

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