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

梦里梦外; 2022-05-21 06:07 124阅读 0赞

## 需求背景 ##

--------------------

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

<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官方文档在动态路由匹配一节中提到

![这里写图片描述][70]

对于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处理方法

## 参考文档 ##

--------------------

1.  [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_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]
2.  [https://blog.csdn.net/lllo3o/article/details/79929458][https_blog.csdn.net_lllo3o_article_details_79929458]
3.  [https://stackoverflow.com/questions/40404787/best-practice-for-reacting-to-params-changes-with-vue-router][https_stackoverflow.com_questions_40404787_best-practice-for-reacting-to-params-changes-with-vue-router]

[70]: /images/20220521/3bf76d268f2e4dc0ac26b5e07e9df03a.png
[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://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://blog.csdn.net/lllo3o/article/details/79929458
[https_stackoverflow.com_questions_40404787_best-practice-for-reacting-to-params-changes-with-vue-router]: https://stackoverflow.com/questions/40404787/best-practice-for-reacting-to-params-changes-with-vue-router