vue 刷新当前页面的方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 刷新当前页面的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、问题

二、手动刷新当前页面

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

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

三、总结

一、问题

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

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

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

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

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

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

二、手动刷新当前页面

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

<template>
    <router-view v-if="isShow" ></router-view>
</template>
<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值

<template>
    <router-view :key="componentKey"></router-view>
</template>
<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>