vue實現(xiàn)局部刷新的實現(xiàn)示例
更新時間：2019年04月16日 10:44:44 作者：Dong
這篇文章主要介紹了vue實現(xiàn)局部刷新的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
利用Vue里面的provide+inject組合（走過路過，不要錯過）
使用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>
其他的刷新頁面方法
- window.location.reload() //有白屏
默認(rèn)參數(shù)是 false，它會用 HTTP 頭 If-Modified-Since 來檢測服務(wù)器上的文檔是否已改變；
如果文檔已改變，reload() 會再次下載該文檔；
如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。
參數(shù)為 true，無論文檔的最后修改日期是什么，它都會繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣
- this.$router.go(0) //有白屏
先跳轉(zhuǎn)到一個空白頁面再跳轉(zhuǎn)回來 //雖不會一閃，但是能看見路由快速變化
//需要頁面刷新的地方，跳轉(zhuǎn)到一個空白頁
this.$router.push('/emptyPage')
//空白頁
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript實現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項,感興趣的小伙伴跟著小編一起來看看吧2024-04-04
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實例詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
vue 動態(tài)添加的路由頁面刷新時失效的原因及解決方案
這篇文章主要介紹了vue動態(tài)添加的路由頁面刷新時失效的原因及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
本篇文章主要介紹了Vue的Class與Style綁定的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化的相關(guān)資料,在Vue中你可以使用watch或者computed來監(jiān)聽對象或數(shù)組某個屬性的變化,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue3集成json-editor-vue3的代碼實現(xiàn)
這篇文章主要介紹了Vue3集成json-editor-vue3的代碼實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
Lottie 是一個由 Airbnb 開源的動畫庫,它允許你在 Web、iOS、Android 等平臺上使用體積小、高性能的體驗豐富的矢量動畫,本文將詳細(xì)介紹在 Vue 項目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于vue項目中向數(shù)組添加元素的3種方式,在Vue中添加元素到數(shù)組非常簡單,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
Vuex拿到state中數(shù)據(jù)的3種方式與實例剖析
store是一個狀態(tài)管理工具(vueX中只有唯一 一個store),下面這篇文章主要給大家介紹了關(guān)于Vuex拿到state中數(shù)據(jù)的3種方式與實例剖析的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue中消息橫向滾動時setInterval清不掉的問題及解決方法
最近在做項目時,需要進(jìn)行兩個組件聯(lián)動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進(jìn)行橫向滾動展示,結(jié)果滾動的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動時setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08