Vue. 之 刷新當前頁面，重載頁面數據

 

如下截圖，點擊左側不同的數據，右側根據左側的KEY動態加載數據。由於右側是同一個頁面，在進行路由跳轉后，不會再次刷新數據。

 

　　解決方案:

　　　　右側的頁面中 script代碼塊添加：watch模塊，如下代碼：

　　　　 
　　　　　... ...

　　　　　mounted : function() {
            this.loadData();
        },
        watch: {
            //監聽相同路由下參數變化的時候，從而實現異步刷新
            '$route'(to,from) {
                this.loadData();
            },
        }, 
        methods: {
            loadData() {
                let varCode = this.$route.query.varCode;
                this.api.service
                .gets({
                    varCode: varCode
                })
                .then(res => {
                    console.log(res)
                })
            },

　　　　... ...