目錄
一、問題
二、手動刷新當(dāng)前頁面
1.方法一：v-if? router-view
2.方法二：更改 router-view的 key值
三、總結(jié)
一、問題
? ?有時候需要手動刷新整個頁面。比如一個頁面右側(cè)有一個患者切換的菜單，切換完患者后，要重新調(diào)用接口，才能讓當(dāng)前的頁面中的數(shù)據(jù)與患者對應(yīng)。
? ? 對于這種情況有兩種解決方法：
1.方法一：切換完患者后，直接重新調(diào)用接口；
? ? ? ? ? ? ? ? 缺點：1)只能刷新頁面中調(diào)用接口的數(shù)據(jù)，如果接口過多，會出現(xiàn)代碼冗余問題
? ? ? ? ? ? ? ? ? ? ? ? ? ?2)沒有調(diào)用接口的部分需要單獨處理，例如使用時間選擇組件時，如果需要默認(rèn)當(dāng)前時間，還需要手動更改 value;子組件內(nèi)部有接口時，還需要添加v-if處理或者?使用ref引用子組件調(diào)用子組件內(nèi)部的接口。
2.方法二：手動刷新，刷新整個頁面。-----如何實現(xiàn)？
二、手動刷新當(dāng)前頁面
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>
三、總結(jié)
1.刷新整個頁面的方法：?
? 在router-view中：方法reload
? ? 1）v-if
? ? ?2)?組件添加一個key值，更改key的值
? ?在需要刷新的頁面接收inject("reload",reload")并在需要刷新頁面時調(diào)用? reload方法。
/*
希望對你有幫助！
如有錯誤，歡迎指正，非常感謝文章來源：http://www.zghlxwxcb.cn/news/detail-612387.html
*/文章來源地址http://www.zghlxwxcb.cn/news/detail-612387.html
到了這里，關(guān)于vue 刷新當(dāng)前頁面的方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
