重新重新整理當前頁面

1、路由重新匯入當前頁面（無效果）

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

但是：我們會發現用vue-router在當前頁面再重定向路由到頁面本身，就算改變id，頁面也是不進行重新整理的，這個方法無效

2、強制重新整理（體驗差）

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

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

3、provide/inject組合（推薦）

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發生改變