create-nuxt-app创建的Nuxt项目在IE9下无限刷新问题排查
问题原因
IE9对HTML5 History API的支持是残缺的:它表面上暴露了history.pushState接口,但实际功能实现存在已知bug,无法正常完成路由跳转逻辑。
Nuxt默认启用vue-router的history路由模式,初始化时只做了最基础的API存在性检测,识别到IE9有pushState接口就会直接走history模式的路由逻辑。但IE9的残缺实现每次都会判定当前路由不匹配,触发重定向,重定向完成后又重复执行相同的检测逻辑,最终陷入无限刷新的死循环。
fallback: true生效的原理 vue-router自带的fallback机制本来就是为这类半兼容浏览器设计的:开启fallback: true后,路由初始化阶段不会只判断pushState接口是否存在,还会做实际的功能可用性检测,识别到IE9这类API实现残缺的浏览器时,会自动降级到hash路由模式,通过URL的hash段处理路由跳转,不会触发整页重定向,无限刷新的问题自然就消失了。
补充配置注意事项
- Nuxt2项目直接在
nuxt.config.js的router配置块中添加fallback: true即可,不需要改动其他业务逻辑 - 兼容IE9时记得提前引入必要的polyfill,比如Promise、ES5标准方法的补丁,否则路由问题解决后仍可能出现其他语法报错
- 不需要手动强制把全局路由模式改成hash,fallback自动降级的逻辑对现代浏览器没有任何副作用,不会给正常支持history API的浏览器URL加上多余的hash后缀
内容的提问来源于stack exchange,提问作者Zachary
相关产品推荐
相关产品推荐

