关于vue
在进行正常页面跳转操作后（页面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 = 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相关知识
b、对，就是通过onhashchange 事件来解决这个bug
APP.vue入口中：
mounted () {
window.addEventListener('hashchange', () => {
let currentPath = window.location.hash.slice(1)
if (this.$route.path !== currentPath) {
this.$router.push(currentPath)
}
}, false)
},
重新刷新一遍路由，问题就可以解决啦！
相关知识
vue背景音乐怎么设置
【毕设精选】基于SpringBoot和Vue的相关系统
ant design vue 表格Table使用
ssm725基于Java的宠物医院预约挂号系统的设计与实现+vue
基于spring boot和vue的宠物相亲网站的设计与实现
基于Node.js+vue基于Vue的宠物饲养管理系统设计与实现(开题+程序+论文) 计算机毕业设计
基于SpringBoot + Vue的宠物医院管理系统
ssm275宠物医院管理系统+vue录像
Nodejs基于Vue的线上宠物商品购物系统
vue基于SpringBoot的宠物爱好者交流商城系统的设计与实现
网址: 关于vue https://m.mcbbbk.com/newsview352392.html
| 上一篇: 恰恰前进锁步技法剖析，五步让拉丁 |
下一篇: 前进、后退 |
