vue this.reload 方法配置

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

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

1.場(chǎng)景

在處理列表時(shí)，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁(yè)面的需求。

2.遇到的問題

1. 用vue-router重新路由到當(dāng)前頁(yè)面，頁(yè)面是不進(jìn)行刷新的

2.采用window.reload()，或者router.go(0)刷新時(shí)，整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，體驗(yàn)不好

3.解決方法

provide / inject 組合

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

我的項(xiàng)目配置：

①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方法的頁(yè)面

內(nèi)容管理 - 投顧推薦 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()   // 調(diào)用刷新方法
     }
    });
  }
 }
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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