vue 刷新当前页面的方式

目录

一、问题

二、手动刷新当前页面

1.方法一：v-if  router-view

2.方法二：更改 router-view的 key值

三、总结

---

一、问题

   有时候需要手动刷新整个页面。比如一个页面右侧有一个患者切换的菜单，切换完患者后，要重新调用接口，才能让当前的页面中的数据与患者对应。

    对于这种情况有两种解决方法：

1.方法一：切换完患者后，直接重新调用接口；

                缺点：1)只能刷新页面中调用接口的数据，如果接口过多，会出现代码冗余问题

                           2)没有调用接口的部分需要单独处理，例如使用时间选择组件时，如果需要默认当前时间，还需要手动更改 value;子组件内部有接口时，还需要添加v-if处理或者 使用ref引用子组件调用子组件内部的接口。

2.方法二：手动刷新，刷新整个页面。-----如何实现？

二、手动刷新当前页面

1.方法一：v-if  router-view

<script>
import { defineComponent, provide, ref} from 'vue';
 
export default defineComponent({
  provide(){
    return{
      reload:this.reload
    };
  },
  setup() {
    //是否显示
    const isShow=ref(true);
    return{
      isShow,
    }
  },
  methods:{
      reload(){
      //  1.方法一：v-if 刷新 router-view
         this.isShow=false;
         this.$nextTick(()=>{
         this.isShow=true;
       })
    }
  }
});
script>
<style lang="scss" scoped>
style>

2.方法二：更改 router-view的 key值

<script>
import { defineComponent, provide, ref} from 'vue';
 
export default defineComponent({
  provide(){
    return{
      reload:this.reload
    };
  },
  setup() {
    //是否显示
    const componentKey=ref('')
    return{
      componentKey
    }
  },
  methods:{
      reload(){
      // 2.方法二：更改 router-view的key值
      this.componentKey=new　Date().getTime()
    }
  }
});
script>
<style lang="scss" scoped>
style>

三、总结

1.刷新整个页面的方法： 

  在router-view中：方法reload

    1）v-if

     2) 组件添加一个key值，更改key的值

   在需要刷新的页面接收inject("reload",reload")并在需要刷新页面时调用  reload方法。

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢

*/