利用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>
其他的刷新頁面方法
默認參數是 false,它會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變;
如果文檔已改變,reload() 會再次下載該文檔;
如果文檔未改變,則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。
參數為 true,無論文檔的最后修改日期是什么,它都會繞過緩存,從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣
先跳轉到一個空白頁面再跳轉回來 //雖不會一閃,但是能看見路由快速變化
//需要頁面刷新的地方,跳轉到一個空白頁this.$router.push('/emptyPage')//空白頁beforeRouteEnter (to, from, next) { next(vm => { vm.$router.replace(from.path) })}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答