目录
一、问题
有时候需要手动刷新整个页面。比如一个页面右侧有一个患者切换的菜单，切换完患者后，要重新调用接口，才能让当前的页面中的数据与患者对应。
对于这种情况有两种解决方法：
1.方法一：切换完患者后，直接重新调用接口；
缺点：只能刷新页面中调用接口的数据，没有调用接口的部分需要单独处理。
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方法。
/*
希望对你有帮助！
如有错误，欢迎指正，非常感谢
*/
转载：https://blog.csdn.net/qq_45327886/article/details/127684814
查看评论