vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
利用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>
其他的刷新頁面方法
- 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è)空白頁面再跳轉(zhuǎn)回來 //雖不會(huì)一閃，但是能看見路由快速變化
//需要頁面刷新的地方，跳轉(zhuǎn)到一個(gè)空白頁
this.$router.push('/emptyPage')
//空白頁
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路由切換 組件重用挖下的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue分頁組件table-pagebar使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了vue分頁組件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方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07