解决IE浏览器下路由变化页面不更新问题

解决IE浏览器下路由变化页面不更新问题

年前做的一个vue项目，利用router控制页面切换，切换的页面内容都是通过iframe标签嵌套展示，chrome下切换时访问正常，但是在IE浏览器出现了一个奇怪的问题：点击切换后，浏览器的地址栏路径发生切换，但是页面没有更新，还是切换之前的内容，打开F12查看iframe标签的src属性，发现src属性没有更新过来。

IE下的这个现象很是奇怪，最终的解决办法是：由于点击切换时，浏览器地址栏路径发生变化，通过强制刷新页面来实现页面内容切换。

具体实现细节如下：在切换页面按钮的文件中监听路由变化，当路由变化时判断浏览器是否为IE，如果是IE，则强制刷新

// 判断浏览器是否为IE
const isIE = (
  /MSIE (\d+\.\d+);/.test(navigator.userAgent) || ~navigator.userAgent.indexOf('Trident/')
)

// 监听路由
watch: {
   '$route' (to, from) {
       if (isIE) {
           window.location.reload()
       }
   }
},

总结：

对于通过iframe标签嵌套组成的页面切换，如果在IE浏览器下发生路由变化页面不更新的问题，可以通过监听路由并强制刷新页面的方法来解决。

参考文献：

[1] vue——路由变化页面数据不刷新问题