vue this.reload 方法配置

更新時間：2018年09月12日 08:50:14 作者：zjl翟

這篇文章主要介紹了vue this.reload 方法配置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

1.場景

在處理列表時，常常有刪除一條數據或者新增數據之后需要重新刷新當前頁面的需求。

2.遇到的問題

1. 用vue-router重新路由到當前頁面，頁面是不進行刷新的

2.采用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好

3.解決方法

provide / inject 組合

作用：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

我的項目配置：

①home.vue

<router-view v-if="isReloadAlive"></router-view>

export default {
 provide() {
   return {
    reload: this.reload
   }
 },
 data(){
  isReloadAlive : true
 },
 methods: {
  reload() {
 this.isReloadAlive = false;
 this.$nextTick(function(){
 this.isReloadAlive = true;
 })
 }
 }
}

②使用reload方法的頁面

內容管理 - 投顧推薦 tgtj.vue

export default {
 inject: ['reload'],  // 注入 reload 方法
 data(){
  。。。。
 },
 method: {
  set: function(id){
    let param = {
     "recommendedConsultant.id": this.recommendedConsultant_id,
     "recommendedConsultant.sequence": this.recommendedConsultant_sequence,
     "recommendedConsultant.consultant_id": id
    }
    setRecommendedAdvisor(param).then((data) => {
     this.$message({ message: data.ret.retMsg });
     if(data.ret.succeed){
      this.reload()   // 調用刷新方法
     }
    });
  }
 }
}

總結

以上所述是小編給大家介紹的vue this.reload 方法配置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
基于Vue的移動端圖片裁剪組件功能
這篇文章給大家介紹了基于Vue的移動端圖片裁剪組件功能，因為移動端是用vue，所以就寫成了一個vue組件，下面就說說自己的一些實現思路,需要的朋友可以參考下
2017-11-11
Vue+elementUI下拉框自定義顏色選擇器方式
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
vue動態(tài)合并單元格并添加小計合計功能示例
這篇文章主要給大家介紹了關于vue動態(tài)合并單元格并添加小計合計功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
vue實現組件值的累加
這篇文章主要為大家詳細介紹了vue實現組件值的累加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
基于vue-draggable 實現三級拖動排序效果
這篇文章主要介紹了基于vue-draggable 實現三級拖動排序效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
element--Diaolog彈窗打開之后渲染組件方式
這篇文章主要介紹了element--Diaolog彈窗打開之后渲染組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue組件BootPage實現簡單的分頁功能
這篇文章主要為大家詳細介紹了Vue小組件BootPage實現簡單的分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue項目pdf(base64)轉圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項目pdf(base64)轉圖片遇到的問題及解決方法,需要的朋友可以參考下
2018-10-10
解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08