2021-03-10 vue同一页面跳转监测地址栏参数变化

//需求：上传投保人和被保人证件照片，如果投保人和被保人是同一人则只需要上传一次。如果投保人和被保人不是同一人，上传完投保人证件，然后跳转到本页面，只修改跳转参数。上传被保人证件照片。

//遇到问题1:.跳转同一页面，页面视图不刷新。

解决方案：1.在App.vue设置属性和v-if来强制刷新router-view，通过provide和inject进行根组件和子孙组件通讯。

//遇到问题2：在浏览器地址栏点击前进后退，地址栏地址发生变化，但页面视图并未同步更新。

解决方案：通过watch检测地址栏参数的变化，

//通过watch监测$route参数，来获取地址栏参数变化，如果参数变化，将控制视图渲染的数据重新赋值。视图就会随着更新。（也可以在watch时，发起异步请求）

watch:{

    '$route.path':function(newVal,oldVal){

        console.log(newVal);

        console.log(oldVal);

    },

     '$route' (to, from) {

        // this.getData(this.$route.query.isLifeCer)

        console.log(this.$route.query.isLifeCer)

        this.isLifeCer=this.$route.query.isLifeCer;

        this.current=this.isLifeCer=='1'?1:0;

        this.applicantIsInsured=JSON.parse(getStore('policyInfo')).ApplicantIsInsured;

    }

  },

methods: {

    async getData (id) {

      // 按照id获取数据

      const { data: { result } } = await this.$http.get('getShowList', {

        params: { id }

      })

      this.dataList = result

    }

}