vue.js刷新當前頁面的實例講解

Posted on by

在我們修改過頁面的某些數據後，通過想要把頁面刷新一下，看看修改後的結果。由於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刷新當前頁面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：