vue無卡頓刷新頁面

重新刷新當前頁面

1、路由重新導入當前頁面（全局設置，所有頁面通用）

this.$router.push({name:'goodsList',params:{vid:vid}})

但是我們會發現用vue-router在當前頁面再重定向路由到頁面本身，就算改變id，頁面也是不進行刷新的，
因為Vue會復用相同組件, 即/page/1 => /page/2 或 /page?id=1 => /page?id=2 此類跳轉, 不會執行created, mounted等鈎子。

解決方法：通過給<router-view />設置一個與路由關聯的動態key值，使頁面進行刷新
<router-view :key="key" />

computed: {
    key () {
        return this.$route.fullPath;
    }
},

2、強制刷新（體驗差）

頁面會類似於ctrl+f5的那種刷新，會有一段時間的空白出現，用戶體驗很不好，不建議使用

location. reload()
或
this.$router.go(0)

3、provide/inject組合（局部使用，調用reload的頁面可用）

1、修改App.vue，做以下修改

<template>
    <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>

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



2、通過聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載，這邊定義了isRouterAlive來控制。
在需要當前頁面刷新的頁面中注入App.vue組件提供（provide）的 reload 依賴，然后

export default {
    inject: ['reload'],  //添加此行
    data(){}
}



3、通過調用 this.reload() 即可實現當前頁面的快速刷新

this.reload()  //調用此函數實現刷新

實例：this.reload()配合watch監聽路由變化，實現視頻選集后刷新頁面功能

1、用戶點擊選集，攜帶當前選中的選集id跳轉當前頁面的路由

2、實現方式

注路由跳轉后仍在本頁面，僅路由所攜帶id發生改變