这篇文章主要介绍了Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决文章都会有所收获，下面我们一起来看看吧。
bug描述:
使用vue-cli搭建的项目, vue-router控制路由.
兼容谷歌 火狐 IE11及IEedge.
在谷歌 火狐 IEedge的地址栏直接改变路由地址, 回车的话, 路由页面能够刷新到响应路由界面.
但是在IE11中, 地址栏虽然改变了, 但页面却没有任何变化.
举个栗子
项目有主页, 路由1 和路由2 单个路由组成. 可在三个路由间任意跳转. 如下图.
正常浏览器: 不通过点击按钮, 而是直接在地址栏中改变路由, 界面是可以正常切换的.
IE11浏览器: bug就出现在不正常的IE浏览器中, 无论你怎么改变地址栏内的路由, 界面是不会变化的.
解决办法:
在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项目中IE11地址栏直接改变路由页面不跳转bug怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
