Vue项目:IE11中地址栏直接改变路由页面不跳转bug

网上找到有很多关于vue-router组件复用问题的回答，但是我的问题和组件复用无关…
记录一下网上好不容易找到的解决方法，原文更详细一点：Vue项目:IE11中地址栏直接改变路由页面不跳转bug

bug描述:

使用vue-cli搭建的项目, vue-router控制路由.

兼容谷歌火狐 IE11及IEedge.

在谷歌火狐 IEedge的地址栏直接改变路由地址, 回车的话, 路由页面能够刷新到响应路由界面.

但是在IE11中, 地址栏虽然改变了, 但页面却没有任何变化.

解决办法:

在app.vue中, 先判断是IE浏览器, 是的话, 给window绑定一个哈希值变化的事件, 当哈希值发生变化时, 将通过$router.path获取当前界面的路由, 与地址栏中的改变的哈希值就行比较, 如果不同, 就调用vue-router的push方法, 人为的去改变路由. 上代码:

mounted(){if (!!window.ActiveXObject || 'ActiveXObject' in window) {window.addEventListener('hashchange', () => {let currentPath = window.location.hash.slice(1)if (this.$route.path !== currentPath) {this.$router.push(currentPath);// 主动更改路由界面}}, false);}
}

Vue项目:IE11中地址栏直接改变路由页面不跳转bug相关推荐

Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue项目开发中优雅的切换服务端ip
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候,需要配置项目对应服务端的ip地址,但如果需要在多个服务端间进行切换,通常的做法是:手动修改vue.config.js配置文件中的服务端ip ...
vue 项目输入框中用 oninput
vue + element 项目中需要根据输入的值,立即对输入框的数据进行判断 ; 如果使用 @change ,只有在失去焦点的时候触发: 这个时候可以用 oninput 监听 oninput oni ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
Vue项目开发中一些常见问题
问题汇总问题:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...
Vue项目开发中的点滴积累系列文章
题记 -- 严于律己,精于行动,点滴积累,着眼未来,你也许不负青春 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架本文章记录从基础入门到实际项目开发中的点点 ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题
vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染. 解决办法有两种: 1:监听地址栏变化 ...

Vue项目:IE11中地址栏直接改变路由页面不跳转bug

Vue项目:IE11中地址栏直接改变路由页面不跳转bug相关推荐

最新文章

热门文章