使用vue.js怎么對當前頁面進行刷新

這篇文章將為大家詳細講解有關使用vue.js怎么怎么對當前頁面進行刷新，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

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怎么怎么對當前頁面進行刷新就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。