vue.js刷新當(dāng)前頁(yè)面的實(shí)例講解
在我們修改過(guò)頁(yè)面的某些數(shù)據(jù)后，通過(guò)想要把頁(yè)面刷新一下，看看修改后的結(jié)果。由于vue的存在，頁(yè)面是不會(huì)自動(dòng)刷新的，需要我們手動(dòng)進(jìn)行操作。在vue里有三種刷新方法，最推薦的就是組合控制法，另外另種方法也會(huì)分享給大家學(xué)習(xí)，下面我們一起來(lái)看看vue如何刷新頁(yè)面吧。
1.強(qiáng)制刷新
window.location.reload()
原生 js 提供的方法；
this.$router.go(0)，vue 路由里面的一種方法；
這兩種方法都可以達(dá)到頁(yè)面刷新的目的，簡(jiǎn)單粗暴，但是用戶體驗(yàn)不好，相當(dāng)于按 F5 刷新頁(yè)面，頁(yè)面的重新載入，會(huì)有短暫的白屏。
2.偽造刷新
通過(guò)路由跳轉(zhuǎn)的方法刷新，具體思路是點(diǎn)擊按鈕跳轉(zhuǎn)一個(gè)空白頁(yè)，然后再馬上跳回來(lái)
// index.vue 首頁(yè)
this.$router.replace('/empty')
// empty.vue 空白頁(yè)
created() {
this.$router.replace('/')
}
3.使用provide / inject組合控制的顯示
vue官方說(shuō)明中允許一個(gè)祖先組件通過(guò)設(shè)置provide/inject向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。provide/inject 是解決組件之間的通信問(wèn)題的利器，不受層級(jí)結(jié)構(gòu)的限制。
在項(xiàng)目中修改app.vue文件：
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
}
},
}
</script>
注入依賴：
export default {
inject:['reload'], //注入依賴
name: "CompanyConfigure",
data() {
return {... ...
調(diào)用：
this.reload();
到此這篇關(guān)于vue.js刷新當(dāng)前頁(yè)面的實(shí)例講解的文章就介紹到這了,更多相關(guān)vue.js刷新當(dāng)前頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法
- vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
- Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
相關(guān)文章
python調(diào)用subprocess模塊實(shí)現(xiàn)命令行操作控制SVN的方法
這篇文章主要介紹了使用python的subprocess模塊實(shí)現(xiàn)對(duì)SVN的相關(guān)操作，通過(guò)設(shè)置GitSvn類，在該類下自定義執(zhí)行SVN常規(guī)操作的方法，需要的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了Python中的yield全方位解讀,在 Python 中,使用了 yield 的函數(shù)被稱為生成器,跟普通函數(shù)不同的是,生成器是一個(gè)返回迭代器的函數(shù),只能用于迭代操作,更簡(jiǎn)單點(diǎn)理解生成器就是一個(gè)迭代器,需要的朋友可以參考下2023-08-08
我們知道,python?是一種高級(jí)編程語(yǔ)言,它提供了自動(dòng)內(nèi)存管理的功能,即垃圾回收機(jī)制,所以本文就來(lái)聊聊python的垃圾回收機(jī)制是如何實(shí)現(xiàn)的以及具體是使用,感興趣的可以了解下2023-09-09
這篇文章主要介紹了Python 迭代器與生成器的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Python免登錄實(shí)現(xiàn)域名解析的示例詳解
這篇文章主要介紹了如何利用編寫python腳本，實(shí)現(xiàn)通過(guò)dnspod api獲取個(gè)人域名內(nèi)的dns解析記錄，從而實(shí)現(xiàn)域名的解析、修改和刪除，需要的可以參考一下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Python語(yǔ)言的自我介紹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
在Python中,引用不確定的函數(shù)通常意味著我們可能在運(yùn)行時(shí)才知道要調(diào)用哪個(gè)函數(shù),或者我們可能想根據(jù)某些條件動(dòng)態(tài)地選擇不同的函數(shù)來(lái)執(zhí)行,下面給大家分享Python?如何引用不確定的函數(shù),感興趣的朋友跟隨小編一起看看吧2024-07-07
詳解python項(xiàng)目實(shí)戰(zhàn):模擬登陸CSDN
這篇文章主要介紹了python項(xiàng)目實(shí)戰(zhàn):模擬登陸CSDN，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
python?pygame實(shí)現(xiàn)控制物體移動(dòng)
這篇文章主要為大家詳細(xì)介紹了python?pygame控制物體移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
python爬蟲_實(shí)現(xiàn)校園網(wǎng)自動(dòng)重連腳本的教程
下面小編就為大家分享一篇python爬蟲_實(shí)現(xiàn)校園網(wǎng)自動(dòng)重連腳本的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-04-04