目录
一、问题
有时候需要手动刷新整个页面。比如一个页面右侧有一个患者切换的菜单，切换完患者后，要重新调用接口，才能让当前的页面中的数据与患者对应。
对于这种情况有两种解决方法：
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>
三、总结
1.刷新整个页面的方法：
在router-view中：方法reload
1）v-if
2) 组件添加一个key值，更改key的值
在需要刷新的页面接收inject("reload",reload")并在需要刷新页面时调用 reload方法。
/*
希望对你有帮助！
如有错误，欢迎指正，非常感谢
*/