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.遇到的問(wèn)題

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è)依賴(lài)，不論組件層次有多深，并在起上下游關(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目打包后瀏覽器緩存問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包后瀏覽器緩存問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Element?el-tag標(biāo)簽圖文實(shí)例詳解
現(xiàn)在好多應(yīng)用場(chǎng)景里會(huì)有一些需要給文章打標(biāo)簽等類(lèi)似的操作,下面這篇文章主要給大家介紹了關(guān)于Element?el-tag標(biāo)簽的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
Vue中如何給Window對(duì)象添加方法
這篇文章主要介紹了Vue中如何給Window對(duì)象添加方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
詳解Vue中的基本語(yǔ)法和常用指令
Vue.js 是一套構(gòu)建用戶(hù)界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。這篇文章主要介紹了vue 的基本語(yǔ)法和常用指令,需要的朋友可以參考下
2019-07-07
Vue-less的使用和deep深度選擇器詳解
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3實(shí)現(xiàn)動(dòng)態(tài)面包屑的代碼示例
這篇文章主要給大家介紹一下Vue3動(dòng)態(tài)面包屑是如何實(shí)現(xiàn)的，實(shí)現(xiàn)思路又是什么，以及發(fā)給大家介紹一下面包屑的功能，文章通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
Vue之插件詳解
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助
2021-11-11