vue.js刷新當前頁面的實例講解
更新時間：2020年12月29日 15:15:25 作者：小妮淺淺
在本篇文章里小編給各位分享了一篇關于vue.js刷新當前頁面的實例講解，有興趣的朋友們可以學習參考下。
在我們修改過頁面的某些數據后，通過想要把頁面刷新一下，看看修改后的結果。由于vue的存在，頁面是不會自動刷新的，需要我們手動進行操作。在vue里有三種刷新方法，最推薦的就是組合控制法，另外另種方法也會分享給大家學習，下面我們一起來看看vue如何刷新頁面吧。
1.強制刷新
window.location.reload()
原生 js 提供的方法；
this.$router.go(0)，vue 路由里面的一種方法；
這兩種方法都可以達到頁面刷新的目的，簡單粗暴，但是用戶體驗不好，相當于按 F5 刷新頁面，頁面的重新載入，會有短暫的白屏。
2.偽造刷新
通過路由跳轉的方法刷新，具體思路是點擊按鈕跳轉一個空白頁，然后再馬上跳回來
// index.vue 首頁
this.$router.replace('/empty')
// empty.vue 空白頁
created() {
this.$router.replace('/')
}
3.使用provide / inject組合控制的顯示
vue官方說明中允許一個祖先組件通過設置provide/inject向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。provide/inject 是解決組件之間的通信問題的利器，不受層級結構的限制。
在項目中修改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 {... ...
調用：
this.reload();
到此這篇關于vue.js刷新當前頁面的實例講解的文章就介紹到這了,更多相關vue.js刷新當前頁面內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Python3 xml.etree.ElementTree支持的XPath語法詳解
這篇文章主要介紹了Python3 xml.etree.ElementTree支持的XPath語法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
django xadmin中form_layout添加字段顯示方式
這篇文章主要介紹了django xadmin中form_layout添加字段顯示方式，具有很好的 參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
這篇文章主要介紹了Python使用urllib2模塊實現斷點續傳下載的方法,實例分析了urllib2模塊的使用及斷點續傳下載的實現技巧,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關于Python中作用域的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了Python enumerate內置庫用法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Python程序暫停的實現代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關于python模塊導入細節的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
今天小編就為大家分享一篇關于Python中正則表達式的用法總結，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
這篇文章主要為大家詳細介紹了pygame庫實現俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了python模擬enum枚舉類型的方法,實例總結了python模擬enum枚舉類型的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
最新評論