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

摘要:
Edge的过程如下:1consbaseRoute=[2{path:'/login','login',redirect:9childs:22component://dynamic面包屑标题25title:“debug”,“project/onlineEquip/detail/:71组件:72meta:80{81path:83name:84隐藏:

情景:

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

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

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

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

过程:

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

具体如下:

本地路由配置:

关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转第1张关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转第2张
 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 = new Router({
88   routes: baseRoute    // 这里默认是hash模式
89 })
90 
91 export default router
View Code

 

解决办法:

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

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

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

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

  

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

  

  重新刷新一遍路由,问题就可以解决啦!

  

 

免责声明:文章转载自《关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇linux 利用 cron 实现 程序开机启动/cron任务的多种实现方法/cron重启/cron日志开启AutoCAD利用VBA宏绘制直线下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

mysql explain用法和结果的含义

  转自:http://blog.chinaunix.net/uid-540802-id-3419311.html   (转载只是为了以后更方便的查看) explain显示了mysql如何使用索引来处理select语句以及连接表。可以帮助选择更好的索引和写出更优化的查询语句。 使用方法,在select语句前加上explain就可以了: 如: expla...

MVC教程八:母版页(布局页)视图

一、母版页介绍和使用 母版页的扩展名为".cshtml",也叫做视图布局页,它相当于网页的模板。在其他网页中,只要引用了母版页,母版页的页面内容就可以自动显示出来,设计者可以修改引用的母版页中预留的部分,其他部分保持不变,这样就可以使多个页面的风格保持一致,给网页设计带来了很大的方便。 1、创建母版页视图的要点 (1)、在Views的子文件夹Shared文...

NetworkX系列教程(10)-算法之四:拓扑排序与最大流问题

小书匠Graph图论 重头戏部分来了,写到这里我感觉得仔细认真点了,可能在NetworkX中,实现某些算法就一句话的事,但是这个算法是做什么的,用在什么地方,原理是怎么样的,不清除,所以,我决定先把图论中常用算法弄个明白在写这部分. 图论常用算法看我的博客: 下面我将使用NetworkX实现上面的算法,建议不清楚的部分打开两篇博客对照理解. 我将图论...

C++ STL hash表用法

C++ STL unordered_map用法 在C++11中,unordered_map作为一种关联容器,替代了hash_map,unordered_map的底层实现是hash表,所以被称为无序关联容器。不管是map还是unordered_map都是一种 key-map(value) 映射的容器,提供非常高的查找效率,下面我们来了解unordered_m...

浅谈前端SPA(单页面应用)

    单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA...

MongoDB 复合索引的试验

根据典型碰到的场景,来做几个实验: 这里创建了个loans collection。简化只有100条数据。这个是借贷的表有 _id, userId, status(借贷状态), amount(金额). 看完 这个实验后, 你会明白了 {userId:1, status:1}, vs {status:1,userId:1} 的差别 PS:这个case 里面其实...