vue中實(shí)現(xiàn)頁面刷新以及局部刷新的方法
一.全頁面刷新
1.修改 App.vue，代碼如下：
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
provide() { // 父組件中返回要傳給下級(jí)的數(shù)據(jù)
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
重點(diǎn)如下圖所示：
2.到需要刷新的頁面使用 inject 進(jìn)行導(dǎo)入并引用 reload：
3.在需要進(jìn)行調(diào)用的方法中調(diào)用 this.reload() 即可
二、局部刷新
1.定義一個(gè)變量 isReloadData，并將該變量綁定到需要刷新的標(biāo)簽上 ：
2.定義局部刷新的方法 reloadPart：
3.在需要執(zhí)行局部刷新的方法中進(jìn)行調(diào)用
三、應(yīng)用場(chǎng)景
- 當(dāng)在頁面中動(dòng)態(tài)修改了某些數(shù)據(jù)，或者是 props 帶過來的數(shù)據(jù)，又或者是通過 funcation 動(dòng)態(tài)設(shè)置的屬性，可能在修改之后不會(huì)展示最新的數(shù)據(jù)。
- 當(dāng)頁面數(shù)據(jù)發(fā)生了變化，但是頁面渲染會(huì)出現(xiàn)bug，例如 el-table 組件在數(shù)據(jù)發(fā)生變化后，會(huì)出現(xiàn)一個(gè)空白區(qū)域。
此時(shí)，全頁面刷新或者局部刷新就會(huì)派上用場(chǎng)，下面截圖舉例本人遇到的第二種情況，已通過使用全頁面刷新及局部刷新解決：
1.默認(rèn)全選，頁面渲染正常：
2.勾選掉一個(gè)展示列，頁面渲染正常：
3.把勾選掉的展示列再勾選上，出現(xiàn)空白區(qū)域：
此時(shí)，只需要在單選的方法中調(diào)用局部刷新的方法 this.reloadPart() 即可解決，同理，全選也是如此。
4.當(dāng)每次新增展示列時(shí)，表格也會(huì)出現(xiàn)空白區(qū)域，此時(shí)我們只需要在新增記錄成功后調(diào)用全頁面刷新的方法 this.reload() 即可。
總結(jié)
到此這篇關(guān)于vue中實(shí)現(xiàn)頁面刷新以及局部刷新的文章就介紹到這了,更多相關(guān)vue頁面刷新及局部刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用Element-UI生成并展示表頭序號(hào)的方法
序號(hào)算是在展示數(shù)據(jù)的時(shí)候，一種很普遍的屬性了，我們可以自己寫生成序號(hào)的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號(hào)的方法,需要的朋友可以參考下2023-01-01
Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue中七牛插件使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue項(xiàng)目中添加electron的詳細(xì)代碼
這篇文章通過實(shí)例代碼給大家介紹了vue項(xiàng)目中添加electron的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實(shí)現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當(dāng)我們?yōu)g覽頁面時(shí),只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動(dòng)時(shí)再繼續(xù)加載后面的圖片,需要的朋友可以參考下2023-07-07
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue路由history模式頁面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了使用vue實(shí)現(xiàn)手寫簽名功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
在vue項(xiàng)目開發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下2022-02-02