Vue實(shí)現(xiàn)刷新當(dāng)前頁面的三種方式總結(jié)
背景
項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁面.
思路
(1)如果頁面簡單,調(diào)用接口刷新數(shù)據(jù)即可.
(2)如果頁面復(fù)雜,需要調(diào)用多個接口或者通知多個子組件做刷新,可以采用刷新當(dāng)前頁面的方式 下面整理了3種方式來實(shí)現(xiàn)刷新當(dāng)前頁面,每種方式的思路不同,各有優(yōu)缺點(diǎn)
實(shí)現(xiàn)
方式1-通過location.reload和$router.go(0)方法
(a)概述
通過location.reload
和$router.go(0)
都可以實(shí)現(xiàn)頁面刷新,它利用瀏覽器刷新功能,相當(dāng)于按下了f5
鍵刷新頁面
優(yōu)點(diǎn):足夠簡單
確定:會出現(xiàn)頁面空白,用戶體驗(yàn)不好
(b)代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架頁 let Layout = { created() { console.log('框架頁加載') }, template: ` <div class="container"> <div class="aside">左側(cè)菜單</div> <div class="main"><router-view></router-view></div> </div> ` } //首頁 let Home = { template: ` <div> 首頁 <button @click="onClick">刷新</button> </div> `, created() { console.log('首頁加載') }, methods: { onClick(){ // 通localtion.reload或者this.$router.go(0)實(shí)現(xiàn)整體刷新頁面,會出現(xiàn)頁面閃爍 // location.reload() this.$router.go(0) } }, } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ] }) Vue.use(VueRouter) //根組件 new Vue({ router, el: '#app' }) </script> </html>
(c)預(yù)覽
方式2-通過空白頁面
(a)概述
通過$router.replace
方法,跳轉(zhuǎn)一個空白頁面,然后再調(diào)回之前頁面,它利用vue-router
切換頁面會把頁面銷毀并新建新頁面的特性
優(yōu)點(diǎn):不會出現(xiàn)頁面空白,用戶體驗(yàn)好
缺點(diǎn):地址欄會出現(xiàn)快速切換的過程
(b)代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架頁 let Layout = { created() { console.log('框架頁加載') }, template: ` <div class="container"> <div class="aside">左側(cè)菜單</div> <div class="main"><router-view></router-view></div> </div> ` } //首頁 let Home = { template: ` <div> 首頁 <button @click="onClick">刷新</button> </div> `, created() { console.log('首頁加載') }, methods: { onClick(){ //使用replace跳轉(zhuǎn)后不會留下 history 記錄,并通過redirect傳遞當(dāng)前頁面的路徑 this.$router.replace(`/blank?redirect=${this.$route.fullPath}`) } }, } //空白頁面 let Blank = { created(){ console.log('空白頁加載') //重新跳回之前的頁面 this.$router.replace(this.$route.query.redirect) }, template: ` <div></div> ` } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]}, //配置空白頁面的路由 {path: '/blank', component: Layout, children:[ {path: '', component: Blank} ]} ] }) Vue.use(VueRouter) //根組件 new Vue({ router, el: '#app' }) </script> </html>
(c)預(yù)覽
方式3-通過provide和inject
(a)概述
通過在父頁面的<router-view></router-view>
上添加v-if的控制
來銷毀和重新創(chuàng)建頁面的方式刷新頁面,并且用到provide
和inject
實(shí)現(xiàn)多層級組件通信方式,父頁面通過provide
提供reload
方法,子頁面通過inject
獲取reload
方法,調(diào)用方法做刷新
優(yōu)點(diǎn):不會出現(xiàn)頁面空白,地址欄會不會出現(xiàn)快速切換的過程,用戶體驗(yàn)好
缺點(diǎn):實(shí)現(xiàn)稍復(fù)雜,涉及到provide
和inject
多層級組件間的通信,和v-if
控制組件創(chuàng)建和銷毀,和$nextTick
事件循環(huán)的應(yīng)用
(b)代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架頁 let Layout = { template: ` <div class="container"> <div class="aside">左側(cè)菜單</div> <!-- 通過v-if實(shí)現(xiàn)銷毀和重新創(chuàng)建組件 --> <div class="main"><router-view v-if="isRouterAlive"></router-view></div> </div> `, created() { console.log('框架頁加載') }, // 通過provide提供reload方法給后代組件 provide(){ return { reload: this.reload } }, data(){ return { isRouterAlive: true } }, methods: { async reload(){ this.isRouterAlive = false //通過this.$nextTick()產(chǎn)生一個微任務(wù),在一次dom事件循環(huán)后,重新創(chuàng)建組件 await this.$nextTick() this.isRouterAlive = true } } } //首頁 let Home = { template: ` <div> 首頁 <button @click="onClick">刷新</button> </div> `, created() { console.log('首頁加載') }, //通過inject獲取祖先元素的reload方法 inject: ['reload'], methods: { onClick(){ this.reload() } }, } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ] }) Vue.use(VueRouter) //根組件 new Vue({ router, el: '#app' }) </script> </html>
(c)預(yù)覽
以上就是Vue實(shí)現(xiàn)刷新當(dāng)前頁面的三種方式總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于Vue刷新當(dāng)前頁面的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08vue - vue.config.js中devServer配置方式
今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Nuxt3項(xiàng)目中問題匯總之刷新頁面useFetch無返回解決
Nuxt.js是一個基于 Vue.js 的服務(wù)端渲染應(yīng)用框架,這篇文章主要給大家介紹了關(guān)于Nuxt3項(xiàng)目中問題匯總之刷新頁面useFetch無返回解決辦法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03