Vue Router URL查询参数改变时页面重新获取数据方案(考虑IE兼容性)

89 阅读 0 评论 59 点赞

我是靠谱客的博主愉快帆布鞋，最近开发中收集的这篇文章主要介绍Vue Router URL查询参数改变时页面重新获取数据方案(考虑IE兼容性)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求背景

最近开发的一个项目中，在B系统使用<iframe>嵌入A系统的案件详情页面

<!--B系统页面-->
<iframe src="http://xxx.systemA.com/#/showCase?caseNo=01"></iframe>

B系统通过改变caseNo的值来切换不同的案件信息

遇到的问题

在A系统的showCase组件中的created生命周期钩子中从服务器获取案件数据

//showCase组件
export default {
  // [...] 
  created() { 
    this.fetchCaseInfo(); 
  }, 
  methods:{
    fetchCaseInfo(){
      // e.g. request API, assign view properties, ... 
    }
  }
}

但是B系统改变caseNo后，展示的仍然是原来案件的信息，并没有去获取新案件的数据

原因分析

Vue Router官方文档在动态路由匹配一节中提到

这里写图片描述

对于URL 的查询参数是一样的道理，只有$route.query的改变Vue Router会复用原来的组件。因此A系统的showCase组件中fetchCaseInfo方法没有再次调用到。

解决过程

参考官方文档，我修改了A系统showCase组件代码

//showCase组件
export default {
  // [...] 
  created() { 
    this.fetchCaseInfo(); 
  },
  watch(){
    //查询参数改变，再次执行数据获取方法
    '$route'(){
      this.fetchCaseInfo();
    }
  },
  methods:{
    fetchCaseInfo(){
      // e.g. request API, assign view properties, ... 
    }
  }
}

改完后在chrome浏览器上是没问题了，但在IE浏览器上仍然不好使。

解决IE兼容性

上网查了下Vue Router IE 兼容性问题，看到有人说是Vue Router依赖HTML5 History API，但IE对这个API没有很好地支持。网上找来一段解决方案（原文见参考文档2），再次修改代码

//showCase组件
export default {
  // [...] 
  created() { 
    this.fetchCaseInfo(); 
  },
  mounted(){
    //IE兼容性处理
    if(this.checkIE()){
      const self = this;
      //使用addEventListener来覆盖window原有的hashchange处理方法
      window.addEventListener('hashchange',(){
        const currentPath = window.location.hash.slice(1); 
        if(self.$route.fullPath !== currentPath){
          self.$route.push(currentPath);
        }
      },false)
    }
  },
  watch(){
    //查询参数改变，再次执行数据获取方法
    '$route'(){
      this.fetchCaseInfo();
    }
  },
  methods:{
    checkIE(){
      return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in                 document.documentElement.style
    },
    fetchCaseInfo(){
      // e.g. request API, assign view properties, ... 
    }
  }
}

这下问题终于解决了。

最佳实践？

其实在查找解决方案的过程中，找到了一个更加简单的方法，原文见参考文档3。

<router-view :key="$route.fullPath"></router-view>

如上在router-view标签中增加key属性，这样URL查询参数改变时，fullPath会更改，整个组件会重新加载，created钩子的fetchCaseInfo 也会重新执行，不需要监控$route的改变。而且这种方式在IE浏览器上也是有效果的，具体为什么在IE上watch$route的方式不可以但是这种方式可以的原理，有大神知道的麻烦解释下。

需要说明的是这种方式虽然简单但不是万能的，重新加载组件对于简单应用是可以接受的，但是对于复杂的应用可能会有性能问题。

总结

为了使Vue Router 只有URL的查询参数改变时，可以重新获取数据：

1，对于简单的应用，可以将router-view标签中的key属性绑定为$route.fullPath，这种方式对IE浏览器也是兼容的；

2，对于复杂的应用，为了提高性能使组件复用，可以监控(watch)在 $route改变时，重新获取数据；

3，为了进一步支持IE浏览器，需要在2的基础上，使用addEventListener来覆盖window原有的hashchange处理方法

参考文档

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
https://blog.csdn.net/lllo3o/article/details/79929458
https://stackoverflow.com/questions/40404787/best-practice-for-reacting-to-params-changes-with-vue-router