vue頁面刷新 provide/inject|this.$router.replace|location.reload()

一、使用provide/inject方式

二、使用this.$router.replace

三、location.reload()

第一種方式：經常使用於整個頁面刷新

• provide：Object | () => Object
• inject：Array | { [key: string]: string | Symbol | Object }

這對選項須要一塊兒使用，已容許一個祖先組件像全部子孫後代注入一個依賴，不管層次多深，並在上下游關係成立的時間裏始終生效。

provide 和 inject 綁定並非可響應的，然而，若是傳了一個可監聽的對象，那麼其對象的屬性仍是可響應的。

要想作到頁面刷新，只需在app.vue中定義provide,在其子孫組件的點擊事件中刷新整個頁面。

app.vue

<router-view v-if="isAlive" />

export default{
    provide(){
        return {
            reload:this.reload
        }
    },
    data(){
        return {
            isAlive: true
        }
    },
    methods:{
        reload(){
            this.isAlive = false
            this.$nextTick(() => {
                this.isAlive = true
            })
        }
    }
}
複製代碼

子組件

export default{
    inject:['reload'],
    methods:{
        handleChange(){
            this.reload()
        }
    }
}
複製代碼

第二種方式：經常使用於路由切換

核心思想是重定向到一個空白頁面，在返回當前頁面，缺點是路由會變換兩次

先創建redirect頁面

export default {
  beforeCreate() {
    const { query } = this.$route
    const path = query.path
    this.$router.replace({ path: path })
  },
  mounted() {},
  render: function(h) {
    return h() // avoid warning message
  }
}
複製代碼

導航Item點擊事件

clickLink(routePath){
    const fullPath = encodeURI(routePath)
    this.$router.replace({
        path: '/redirect',
        query: {
            path: encodeURI(fullPath)
        }
    })
}
複製代碼

還可解決其餘頁面刷新問題，好比網速慢的時候，你點擊了生成某個列表，網速太慢你想去其餘頁面，在返回來的時候看到的可能不是最新數據，這時候你也可使用此種方式，從新刷新頁面，，，

第三種方式: 缺點就是會出現空白頁面

簡單粗暴
location.reload()
複製代碼