vue 路由参数变化，页面不刷新，provide /inject 完美解决方案

此方法使用的是v-if来控制router-view的显示或隐藏，v-if从false变为true时，vue会重新渲染router-view区域，所以当参数变化时，只需让v-if 从true => false => false,就能实现页面刷新;
问题描述

路由
http://localhost:1221/newproduct?entityId=7B311104
点击div时，变为
http://localhost:1221/newproduct
页面不刷新
怎么办……

首先，找到自己的route-view

//mainfirem.vue

<template>
  <div class="os_container">
    <navbar></navbar>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name:'mainframe',
  provide(){
    return {
      reload:this.reload
    }
  },
  data () {
    return {
      isRouterAlive:true,
    }
  },
  components:{
    navbar,
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style scoped lang="stylus">
</style>

<route-view>下显示的页面

//newProduct

export default {
  name: 'newproduct',
  inject:['reload'],
  method:{
    //点击div的时候，路由参数改变，
    //调用mainfirem.vue下的this.reload()方法，来改变v-if的状态
    clickDiv(){
      this.reload()
    }
  }

provide /inject 官网地址
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
end