vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例

更新時(shí)間：2019年04月16日 10:44:44 作者：Dong

這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

利用Vue里面的provide+inject組合（走過路過，不要錯(cuò)過）

使用2.2.0 新增的provide / inject控制<router-view>的顯示隱藏

在App.vue中使用provide

//App.vue
<template>
  <div>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        isRouterAlive: true
      }
    },
    provide(){ //提供
      return {
        reload: this.reload
      }
    },
    methods: {
      reload(){
        this.isRouterAlive = false
        this.$nextTick( function () {
          this.isRouterAlive = true
        })
      }
    }
  }
</script>

在使用局部刷新的組件中使用inject

<script>
  export default {
    name: 'myComponent',
    data () {
      return {}
    },
    inject: ['reload'], //注入
    methods: {
      myCallBack(){
        // ...
        this.reload() //局部刷新
      }
    }
  }
</script>

其他的刷新頁(yè)面方法

window.location.reload() //有白屏

默認(rèn)參數(shù)是 false，它會(huì)用 HTTP 頭 If-Modified-Since 來檢測(cè)服務(wù)器上的文檔是否已改變；

如果文檔已改變，reload() 會(huì)再次下載該文檔；

如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。

參數(shù)為 true，無論文檔的最后修改日期是什么，它都會(huì)繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時(shí)按住 Shift 健的效果是完全一樣

this.$router.go(0) //有白屏

先跳轉(zhuǎn)到一個(gè)空白頁(yè)面再跳轉(zhuǎn)回來 //雖不會(huì)一閃，但是能看見路由快速變化

//需要頁(yè)面刷新的地方，跳轉(zhuǎn)到一個(gè)空白頁(yè)
this.$router.push('/emptyPage')

//空白頁(yè)
beforeRouteEnter (to, from, next) {
   next(vm => {
    vm.$router.replace(from.path)
   })
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router-link
這篇文章主要介紹了詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router-link，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制,本文給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下
2018-04-04
vue中靜態(tài)文件引用的注意事項(xiàng)及說明
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
淺談vue-router路由切換組件重用挖下的坑
今天小編就為大家分享一篇淺談vue-router路由切換組件重用挖下的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue分頁(yè)組件table-pagebar使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了vue分頁(yè)組件table-pagebar使用實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件
這篇文章主要介紹了vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件，幫助大家開發(fā)Web應(yīng)用程序，完成需求，感興趣的朋友可以了解下
2020-10-10
Vue3中使用Supabase?Auth方法詳解
這篇文章主要為大家介紹了Vue3中使用Supabase?Auth方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07